Vue开发常见问题及解决方法

安装问题

-。 install timeout 安装超时
解决:
方法01： npm 换用 cnpm

cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些

-。 提示没有安装python 、build失败等
因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全window 用户依赖 visual studio 的一些库和python 2+,
windows的小伙伴都装上:

• windows-build-tools
• python 2.x

缺少依赖或模块

-。can't not find 'xxModule' 找不到某些依赖或者模块
这种情况一般报错信息可以看到是哪个包抛出的信息
解决: 卸载该模块后，重新安装

---

Vue运行报错

启动报错

vue-cli脚手架关闭eslint
报错

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决
vue-cli脚手架关闭eslint
- 1. 打开 build文件夹下面的webpack.base.conf.js;
- 2. 找到下面这段代码，将它注释掉
- 3. 重启项目

const createLintingRule = () => ({       //将它们注释掉
  // test: /\.(js|vue)$/, 
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

报错

[Vue-warn]: Missing required prop: "to"  (found in component <router-link>) //报错

这个错误是<router-link>少了个to或者是写错
解决: 正确写法为：<router-link to="/home">

路由在做字符串拼接的时候，to要作为一个属性绑定 <router-link :to="'/home/'+item.id">

声明click/on-click的方法找不到

报错

[Vue warn]: Invalid handler for event "on-click": got undefined  //报错

解决: click/on-click的方法 没有写到methods:{ }里面。

-。 给组件内的原生控件添加事件,不生效的问题

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子01-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
 
<!--// 错误例子02-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
 
 
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
 
<!--明明官方文档有的,一堆人不愿意去看,,Fuck-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

-。在函数内用了this.xxx=,为什么抛出 Cannot set property 'xxx' of undefined;

这是this的套路了…this是和当前运行的上下文绑定的…
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;

解决:
暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
箭头函数: 会强行关联当前运行区域为 this 的上下文;
关于this的知识, 推荐读阅 <<你不知道的 JS 系列>>

vue 在src引入图片报错

Module not found: Error: Can't resolve '../../images/icons/loading2.gif' in '/home......

报错信息就是图片找不到路径
解决
~@的意思： @是webpack设置的路径名，代表的是src目录，可以在build / webpack.base.conf.js更改设置

<img src="@/assets/icons/quality.svg" alt="air quality"> 

兼容问题

使用了 axios， IE 整个家族都不支持 promise, 解决方案：

npm install es6-promise  

// 在 main.js 引入即可
require("es6-promise").polyfill();   // ES6的polyfill