前言
文章内容覆盖范围,芝麻绿豆
的破问题都有,不止于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的小伙伴都装上:
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><