开发中，遇到过的难点，亮点

入门教程

1.问题一

element表格多选框改为单选框效果

<el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
>
    <el-table-column type="selection" width="55"> </el-table-column>
<el-table>

handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else if (val.length === 1 ){
        console.log(val, 222);
      }
},

.el-table {
	margin-top: 20px;
	thead tr th:nth-of-type(1) {
	  visibility: hidden;
	}
	.el-checkbox__inner {
	  border-radius: 50%;
	}
}

2.问题二

GitHub打不开

3.问题三

switchhost软件报 please run switchhosts as an administrator
‪C:\Windows\System32\drivers\etc\hosts

4.问题四

函数先备份，后调用

 var p = function (params) {
    console.log(11111111)
}
var c = p;
p = function () {
    console.log(222222)
}
console.log(c())//11111111

5.问题五

获取元素距离窗口的的距离，以及元素的宽高
offsetTop 只能显示元素到父元素顶部的距离
所以调用方法 getBoundingClientRect 后返回的对象中的属性的 top
即 (需要读取的元素).getBoundingClientRect().top 即可返回到页面顶部的距离

6.问题六

解决eslint代码换行符报错问题

// . 文件内加上这一条
   rules: {
    endofLine: 'auto',
  },

7.问题七

接口返回response的token数据，浏览器可见，但是axios不能读取到，需要后台加上这个设置

// 让浏览器能访问到其它响应头
response.addHeader("Access-Control-Expose-Headers","token");

8.问题八

不同账号，有的账号能登录，有的账号出现跨域错误
前端根据login接口，得到token信息，存到cookie里面
因为，后天根据用户信息（包括权限）生成token，token超长，导致传给后台有识别问题

ip 地址解析   百度地图  后台解析地址
实名认证  创蓝云智  3毛钱
短信验证  创蓝云智  3毛钱
友盟读取地址信息

9.问题九

滚动条默认显示底部如何让滚动条显示到顶部
滚动条层旋转180° 内容层再旋转180°

10.问题十

<input type='number'> 弹出默认键盘   不好看
<input type='tel' pattern = '[0-9]'>  弹出纯数字键盘

11.问题十一

页面切换路由第一个页面没有滚动条第二个页面有滚动条
会出现中间内容区闪烁问题，解决方法

<div style=" padding-left: calc(100vw - 100%);">
     <div style="width:1200px;height: 1000px;margin:0 auto;"></div>
</div>

12 问题十二

element使用修饰符，用户在输入的时候不能输入空格需要在内容之间输入空格
解决办法是下面

 <el-input
      v-model=""
      class="w350"
      placeholder="请输入角色描述"
      clearable
      @blur="=$()"
 />

13 问题十三

一个盒子内有两个元素一个svg 一个span文字微调他们上下距离对齐

 . {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  vertical-align: -0.45em;
}
. {
   margin-right: 14px;
   width: 18px;
  height: 18px;
  transform: translateX(-2px);
  vertical-align: -0.5em;
}

14 问题十四

/group1/M00/00/00/
不同源用a标签下载时，浏览器会直接预览pdf文件，doc文件可以下载，这时候需要走接口

application/msword doc
application/pdf pdf
application/ docx

this.fileLinkToStreamDownload('/' + url, '文件名', '文件后缀')
 fileLinkToStreamDownload(url, fileName, type) {
  const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
  if (!reg.test(url)) {
    throw new Error('传入参数不合法,不是标准的文件链接')
  } else {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    xhr.setRequestHeader('If-Modified-Since', '0')
    xhr.setRequestHeader('Content-Type', `application/${type}`)
    xhr.responseType = 'blob'
    var _this = this
    xhr.onload = function() {
      if (this.status == 200) {
        // 接受二进制文件流
        var blob = this.response
        _this.downloadExportFile(blob, fileName, type)
      }
    }
    xhr.send()
  }
},
 downloadExportFile(blob, tagFileName, fileType) {
  const downloadElement = document.createElement('a')
  let href = blob
  if (typeof blob == 'string') {
    downloadElement.target = '_blank'
  } else {
    href = window.URL.createObjectURL(blob) // 创建下载的链接
  }
  downloadElement.href = href
  downloadElement.download = tagFileName + '.' + fileType // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  if (typeof blob != 'string') {
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  }
},

/yueguangMaNong/article/details/110949974
在前后端分离项目中，由于跨域，导致前端每次请求后台都会发送一个
options请求去检查目标站点是否可达，这样后台就会收到很多响应码
为204的OPTIONS请求，虽然每次请求都耗时极少，但是一旦请求量大了，
还是会占用部分连接资源，并且日志中也会存在很多没用的数据，
导致日志文件体积增加。下面就来讲讲如何利用Nginx拦截这些OPTIONS请求

跨域存在预请求，走后台拦截options耗时多，所有用niginx拦截，直接返回204
但是$request_method = 'OPTIONS’时候也要设置跨域请求头

可以看到每个200响应之前都有一个204响应，耗时也就5毫秒，但是就是看它不爽。
同样服务器端的日志是一个204响应一个200响应

设置nginx之后也会有204请求但是耗时0ms
后台日志也只有一个200的get请求

location /{
    if ($request_method = 'OPTIONS') {
        # 对于OPTIONS，不保存请求日志到日志文件
        access_log off;
        # 这里配置允许跨域的域名，* 代表所有，也可以写域名： 或者IP+端口    	                                 	http://192.168.1.10
        add_header 'Access-Control-Allow-Origin' '*';
        # 允许的请求类型
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Credentials' true;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-    Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        # 允许跨域的最大时间，超过这个时间又会重发一次OPTIONS请求获取新的认证
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        # 直接在这里返回204响应，不转发到后台服务程序
        return 204;
    }
}

15 问题十五

nrm用cnpm安装后成功，但是nrm ls 报错

The “path” argument must be of type string. Received undefined

解决：使用npm降低版本安装

16 问题十六

项目借助git暂存，有时候改项目代码时候，不小心改了不该改的代码，发现页面崩溃了，这时候需要用到撤回代码看看

17 问题十七微信小程序手机端调试不能访问后台

解决
问题
在微信开发者工具中能正常请求本地后台数据，但在手机预览中却请求不到。

解决办法
1、在微信开发者工具中设置：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

2、微信小程序开发者工具中，请求的地址不得使用localhost，而应改成本地服务器所在的电脑IP，查看本机IP地址的方法为：打开cmd，输入ipconfig，IPV4即为需要修改的IP地址

3、手机和电脑（本地服务器）需要连接同一局域网（WIFI网络）

4、手机扫码进入小程序后，需要打开手机开发者模式，重启小程序，才能请求到数据。

18 Mysql连接报错：1130-host … is not allowed to connect to this MySql server如何处理

/sh541210/article/details/81981062
在搭建完LNMP环境后用Navicate连接出错

遇到这个问题首先到mysql所在的服务器上用连接进行处理

1、连接服务器: mysql -u root -p

2、看当前所有数据库：show databases;

3、进入mysql数据库：use mysql;

4、查看mysql数据库中所有的表：show tables;

5、查看user表中的数据：select Host, User,Password from user;

6、修改user表中的Host:update user set Host=‘%’ where User=‘root’;

7、最后刷新一下：flush privileges;

#一定要记得在写sql的时候要在语句完成后加上" ; "下面是图示说明

19 Mysql连接报错： is not a function

20 当我们使用 NODE_ENV = production 来设置环境变量的时候，会有windows命令被阻塞，导致报错。cross-env 能够提供一个设置环境变量的scripts，这样就可以同时兼容unix和windows。

修改前

"scripts": {
    "build": "NODE_ENV=production webpack --config "
  },

npm install cross-env --save-dev

修改后

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config "
  }

21 配置nginx的https时候，配置完了，重启nginx报错，nginx: [emerg] unknown directive “ssl” in /usr/local/nginx/conf/:16

/weixin_38111957/article/details/81283121

22 霸屏动画在ios app中显示有白背景，所以要单独用其他的做

做lottie动画时 Android可以显示透明色

23 移动端适配

/* Rem 核心实现 */

  (function (doc, win) {
    var docEl = doc.documentElement;
    var clientWidth = docEl.clientWidth;
    var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
    var recalc = function () {
      if (clientWidth === undefined) return;
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
    if (doc.addEventListener === undefined) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  }(document, window));

24 net start mysql 发生系统错误2 系统找不到指定的文件

转自：/p/6d8ed7c36e6f
以管理员身份运行，在命令行输入cd+mySQL的bin目录的安装路径
C:\Windows\system32>cd C:\Program Files\MySQL\MySQL Server5.6\bin
C:\Program Files\MySQL\MySQL Server5.6\bin>mysqld --remove
Service successfully removed.
C:\Program Files\MySQL\MySQL Server5.6\bin>mysqld --install
Service successfully installed.
C:\Program Files\MySQL\MySQL Server5.6\bin>net start mysql
MySQL 服务正在启动 .
MySQL 服务已经启动成功。

ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘newpassword’;

25 Navicat ,SQLyog连接MySQL8 异常2059-Authentication plugin ‘caching_sha2_password’ cannot be loaded解决方案

/weixin_40845165/article/details/84076691
1，登录MySQL，使用命令
mysql -u root -p或mysql -u root -ppassword【ps：-ppassword后面的密码是你的root密码】
2，修改加密规则
ALTER USER ‘root’@‘localhost’ IDENTIFIED BY ‘password’ PASSWORD EXPIRE NEVER;

3，更新用户密码
ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘password’;

4，刷新权限
FLUSH PRIVILEGES;

5，重置密码
alter user ‘root’@‘localhost’ identified by ‘你的密码’;

26 如何判断是否在app内部嵌套页面

var Westeros = {
  versions: (function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iOS终端
      ios_uiwebview: u.indexOf('UIWebView') > -1, //iOS终端，使用UIWebView（app2.0.0以下或iOS 8以下版本）
      ios_wkwebview: u.indexOf('WKWebView') > -1, //iOS终端，使用WKWebView（app2.0.0以上且iOS 8以上版本）
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
      iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, //是否iPad
      webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
    };
  })(),
  language: (navigator.browserLanguage || navigator.language).toLowerCase(),
  inApp: navigator.userAgent.indexOf('HengDaJinFu') > -1
};
var Snow = function () { };
if (Westeros.versions.android) {
  Snow.prototype.invokeNative = function (args) {
    // hybrid交互传参
    prompt('snow://' + JSON.stringify(args), '');
    console.log(args);
  };
} else if (Westeros.versions.ios) {
  
  if (Westeros.versions.ios_wkwebview) {
    Snow.prototype.invokeNative = function (args) {
      window.webkit.messageHandlers.snow.postMessage(args);
      console.log(args);
    };
  } else {
    // uiwebview
    Snow.prototype.invokeNative = function (args) {
      var iFrame = document.createElement('iframe');
      iFrame.setAttribute('src', 'snow://' + encodeURIComponent(JSON.stringify(args)).replace(/\*/g, '%2A').replace(/!/, '%21'));
      document.documentElement.appendChild(iFrame);
      iFrame.parentNode.removeChild(iFrame);
      iFrame = null;
      console.log(args);
    };
  }
} else {
  Snow.prototype.invokeNative = function () {
    console.error('调用异常');
  };
  console.log("web");
}

Ygritte.prototype.closeWebView = function (callbackName) {
  var args = ['knowNothing', 'closeWebView', callbackName || '', {}];
  //((args), 1);
  snow.invokeNative(args);
};


import VConsole from 'vconsole';
var vConsole = new VConsole();
Vue.use(vConsole)

Vue.use(Vant);

26 微信小程序真机调试echarts

设置echart的属性：force-use-old-canvas=“true”

注意事项：
这个错误针对真机调试，上线后不会出现这个想象，因为添加 force-use-old-canvas="true"后，可能画面有点失真，上线的时候去掉该属性即可

最坑的几点

echarts 的所有父级元素都不能有定位否则在测试时就会出现echarts不随屏幕滚动的bug！！！ overflow：auto 也不行！！！！！！！！！

echarts的层级最高如果自定义的tabar 要使用 cover—view 不然echarts会显示在tabar的上面

echarts在开发者工具上不卡，但是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡（这也是困扰了我好几天的原因！但是发布之后就不会卡挺流畅的，使用预览也不会卡）所以真机调试卡不用担心也不用去怀疑是请求方式的问题，使用预览或者发布体验版本就可以

嘻嘻

27 设计师给的svg文件外层设置颜色值无效

设计师把颜色设置为#000 这时候使用阿里图库上传去颜色就可以直接复制svg代码使用了

28 模拟input框，实现换行输入内容

<span
  class="mn-input"
  v-html="ipt16"
  @blur="ipt16 = $"
  :contenteditable="isEditStatus"
></span>

.mn-input {
  padding: 0 10px;
  outline: none;
  border-bottom: 1px solid #000;
  font-weight: 600;
  font-size: 18px;
}

29 复制链接的方法

<input id="id_payment" type="text" :value="url" tabindex="-1" /> 

("id_payment").select(); // 选择对象
("Copy"); // 执行浏览器复制命令
    
#id_payment {
  position: absolute;
  left: 120%;
}
按tab键时候，会聚焦到这个输入框     
设置tabindex='-1'取消tab键聚焦功能  
tabindex是设置按住tab键聚焦的输入框顺序

29 element-ui的el-table组件使用fixed ，出现样式错乱问题

this.$nextTick(() => {
  this.$refs.table.doLayout()
})

30.我给组件内的原生控件添加事件,怎么不生效了？

官网介绍

// 自定义组件的 v-model
<base-checkbox v-model="lovingVue"></base-checkbox>

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      return Object.assign({},
        this.$listeners,// 我们从父级添加所有的监听器
        {
          input: function (e) {
            vm.$emit('input', e.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

// Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器
// v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素
<base-input v-on:focus="onFocus"></base-input>

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

31. 我用了 axios , 为什么 IE 浏览器不识别(IE9+)

那是因为 IE 整个家族都不支持 promise, 解决方案:
npm install es6-promise
// 在  引入即可
// ES6的polyfill
require("es6-promise").polyfill();

32. 为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

这个是 webpack 里面的对应插件处理的，对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染;

具体配置在里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

33. Vue SPA 没法做优化(SEO)!有解决方案么

可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html，现在 vue 的服务端开发框架有这么个比较流行,如下。

34. Vue可以写 hybird App 么!

当然可以,两个方向.

codorva + nativescript
Weex

35. Vue可以写桌面端么?

当然可以,有electron和node-webkit(nw); 我只了解过electron;

electron
electron-vue: Vue-cli 针对 electron 的脚手架模板

秒客网

开发中，遇到过的难点，亮点

1.问题一

2.问题二

3.问题三

4.问题四

5.问题五

6.问题六

7.问题七

8.问题八

9.问题九

10.问题十

11.问题十一

12 问题十二

13 问题十三

14 问题十四

15 问题十五

16 问题十六

17 问题十七微信小程序手机端调试不能访问后台

18 Mysql连接报错：1130-host … is not allowed to connect to this MySql server如何处理

19 Mysql连接报错： is not a function

20 当我们使用 NODE_ENV = production 来设置环境变量的时候，会有windows命令被阻塞，导致报错。cross-env 能够提供一个设置环境变量的scripts，这样就可以同时兼容unix和windows。

21 配置nginx的https时候，配置完了，重启nginx报错，nginx: [emerg] unknown directive “ssl” in /usr/local/nginx/conf/:16

22 霸屏动画在ios app中显示有白背景，所以要单独用其他的做

23 移动端适配

24 net start mysql 发生系统错误2 系统找不到指定的文件

25 Navicat ,SQLyog连接MySQL8 异常2059-Authentication plugin ‘caching_sha2_password’ cannot be loaded解决方案

26 如何判断是否在app内部嵌套页面

26 微信小程序真机调试echarts

27 设计师给的svg文件外层设置颜色值无效

28 模拟input框，实现换行输入内容

29 复制链接的方法

29 element-ui的el-table组件使用fixed ，出现样式错乱问题

30.我给组件内的原生控件添加事件,怎么不生效了？

31. 我用了 axios , 为什么 IE 浏览器不识别(IE9+)

32. 为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

33. Vue SPA 没法做优化(SEO)!有解决方案么

34. Vue可以写 hybird App 么!

35. Vue可以写桌面端么?

相关文章

开发中，遇到过的难点，亮点

1.问题一

2.问题二

3.问题三

4.问题四

5.问题五

6.问题六

7.问题七

8.问题八

9.问题九

10.问题十

11.问题十一

12 问题十二

13 问题十三

14 问题十四

15 问题十五

16 问题十六

17 问题十七 微信小程序手机端调试不能访问后台

18 Mysql连接报错：1130-host … is not allowed to connect to this MySql server如何处理

19 Mysql连接报错： is not a function

20 当我们使用 NODE_ENV = production 来设置环境变量的时候，会有windows命令被阻塞，导致报错。cross-env 能够提供一个设置环境变量的scripts，这样就可以同时兼容unix和windows。

21 配置nginx的https时候，配置完了，重启nginx报错，nginx: [emerg] unknown directive “ssl” in /usr/local/nginx/conf/:16

22 霸屏动画在ios app中显示有白背景 ，所以要单独用其他的做

23 移动端适配

24 net start mysql 发生系统错误2 系统找不到指定的文件

25 Navicat ,SQLyog连接MySQL8 异常2059-Authentication plugin ‘caching_sha2_password’ cannot be loaded解决方案

26 如何判断是否在app内部嵌套页面

26 微信小程序真机调试echarts

27 设计师给的svg文件 外层设置颜色值无效

28 模拟input框，实现换行输入内容

29 复制链接的方法

29 element-ui的el-table组件 使用fixed ，出现样式错乱问题

30.我给组件内的原生控件添加事件,怎么不生效了？

31. 我用了 axios , 为什么 IE 浏览器不识别(IE9+)

32. 为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx

33. Vue SPA 没法做优化(SEO)!有解决方案么

34. Vue可以写 hybird App 么!

35. Vue可以写桌面端么?

相关文章

17 问题十七微信小程序手机端调试不能访问后台

22 霸屏动画在ios app中显示有白背景，所以要单独用其他的做

27 设计师给的svg文件外层设置颜色值无效

29 element-ui的el-table组件使用fixed ，出现样式错乱问题