我们在用Vue做开发时，经常会遇到类似安装超时，依赖包未安装等情况，今天我就汇总总结一下Vue开发中可能经常会碰见的问题。

Q1：安装超时(install timeout)

方案有这么些:
cnpm : 国内对npm的镜像版本

/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org

// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
yarn 和 npm 改源大法

//使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org

Q2：安装一些需要编译的包:提示没有安装python、build失败等 
因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,大多都齐全 window 用户依赖 visual studio 的一些库和python 2+, windows的小伙伴都装上: windows-build-tools python 2.x
Q3：can’t not find ‘xxModule’ - 找不到某些依赖或者模块
这种情况一般报错信息可以看到是哪个包抛出的信息.，一般卸载这个模块,安装重新安装下即可.
Q4：data functions should return an object
这个问题是 vue 实例内,单组件的data必须返回一个对象;如下

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [
          {
            title: '财务信息',
            url: '/userinfo'
          },
          {
            title: '帐号信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

为什么要 return 一个数据对象呢? 官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题...

Q5：我给组件内的原生控件添加事件,怎么不生效了!!!

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<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#给组件绑定原生事件-->

Q6：我用了 axios , 为什么 IE 浏览器不识别(IE9+)
那是因为 IE 整个家族都不支持 promise, 解决方案:

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

Q7：我在函数内用了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 的上下文; 

Q8：我看一些Vue教程有这么些写法,是什么意思@click.prevent,v-demo.a.b;
就拿这两个例子来说吧. 
@click.prevent : 事件+修饰符 , 作用就是点击但又阻止默认行为。
v-demo.a.b: 自定义指令+修饰符. 具体看你什么指令了,修饰符的作用大多是给事件增加一些确切的拓展功能，比如阻止事件冒泡,阻止默认行为,访问到原生控件,结合键盘快捷键等等 。
可以自定义修饰符么?也是可以的。可以通过全局 config.keyCodes 对象自定义键值修饰符别名：

Q9：为什么我的引入的小图片渲染出来却是 data:image/png;base64xxxxxxxx
这个是 webpack 里面的对应插件处理的，对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染; 具体配置在webpack.base.conf.js里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

Q10：Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素. 可以用v-if和v-else-if指令来控制其他元素达到并存的状态。换个直白的解释,就是有一个唯一的父类,包裹者; 比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!