使用 vue-cli 可以
快速搭建Vue开发环境以及对应的webpack配置
// 由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像
// 淘宝镜像安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 修改成淘宝镜像 (可直接使用npm命令,但镜像地址是淘宝,推荐)
npm config set registry https://registry.npm.taobao.org
// 查看镜像设置是否成功
npm get registry
// cnpm 命令安装依赖:
cnpm install name
1. Vue CLI 使用前提: 安装好 -
Node(全局)
2. 安装 Vue Cli:
cnpm install -g @vue/cli
注意:
这个指令安装的是 Vue CLI3及以上版本(cli3及以上版本 和 cli2的安装指令相同,所以会覆盖掉cli2)
如果你想按照Vue CLI2的方式初始化项目时,你可以全局安装一个桥接工具,这样你就即可以使用CLI2的初始化指令,又可以使用CLI3及以上版本的初始化指令了。
cnpm install -g @vue/cli-init
3. 初始化Vue项目
// Vue CLI2 初始化项目:
vue init webpack <Project Name> //文件名 不支持驼峰(含大写字母)
// Vue CLI3及以上版本 初始化项目:
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
4. Vue中使用less
// Vue中使用less报错,无法编译
// 原因: less-loader版本过高
// 解决办法:
// (1)卸载原来的less和less-loader
npm uninstall less-loader
npm uninstall less
// (2)下载匹配的版本
npm install less@3.12.2 less-loader@4.1.0 --save-dev