Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

前言

文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue;

给出的是方案,而非手把手一字一句的给你说十万个为什么!

问题汇总

Q:安装超时(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 模块 : https://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

Q: 想学习Vue,要先学习脚手架的搭建么

若是你想快速上手，用官方的脚手架即可(Vue-Cli 3)

因为不管是webpack还是parcel，gulp，都是一些构建工作流的东东；

学习脚手架的搭建，更多的是要针对项目业务进行定制，调优；

一般入门级的无需太早考虑这方面的，只要专心学好Vue的使用姿势便可。

Q:安装一些需要编译的包:提示没有安装python、build失败等

因为一些 npm 的包安装需要编译的环境,mac 和 linux 都还好,

而window 用户依赖 visual studio 的一些库和python 2+,

windows的小伙伴都装上:

• windows-build-tools
• python 2.x

Q:can't not find 'xxModule' - 找不到某些依赖或者模块

这种情况一般报错信息可以看到是哪个包抛出的信息，一般卸载这个模块,安装重新安装下即可。

Q: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 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！

简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题,

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

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->

<!--// 错误例子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><