使用 Vue-CLI 初始化项目

874 阅读1分钟

使用 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