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-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 系列>>

兼容问题

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

npm install es6-promise  

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