Vue-Cli脚手架的安装和使用

一、Vue-Cli脚手架的环境准备

1. 安装Node.js

1-1 去 Node.js官网 下载安装包，修改安装路径到其它盘，如 G:\Program Files

1-2 安装npm淘宝镜像，提速

# 切换国内淘宝镜像，使用淘宝镜像下载速度更快
npm config set registry https://registry.npm.taobao.org 
# 查看当前镜像使用的地址，返回成功，则代表设置成功
npm config get registry

2. 设置 cnpm的下载路径和缓存路径

2-1 在安装目录 G:\Program Files\nodejs 下手动新建 node_cache 和 node_global 文件夹，如下图:

2-2 调整目录：在命令行分别输入

npm config set prefix "G:\Program Files\nodejs\node_global"
npm config set cache "G:\Program Files\nodejs\node_cache"

3. 设置环境变量

环境变量 | 系统变量 | Path | 编辑 | 新建 | 复制粘贴 G:\Program Files\nodejs\node_global”

4. 查看 cnpm安装是否成功

在命令行输入指令 cnpm -v  查看 cnpm安装是否成功（安装成功才可以使用 cnpm）　　

5. 安装 cnpm

# 在命令行输入如下指令，安装cnpm： 
npm install -g cnpm --registry=https://registry.npm.taobao.org
#	【注意】：cnpm的安装路径是 G:\Program Files\nodejs\node_global\node_modules\cnpm\bin

二、Vue-Cli脚手架的安装，执行一行命令即可

方式1. 在 Vue-Cli脚手架官网 查找安装命令和版本，如：

npm install -g @vue/cli

方式2. 进入 Node.js 安装目录，使用 cnpm（所有的 npm 都可改用 cnpm ，cnpm 速度比 npm 快）

G:\Program Files\nodejs\cnpm install -g @vue/cli

三、Vue-Cli脚手架的使用

1. 创建helloworld项目实例

# 1. 在要创建工程的目录下，打开控制台，输入如下指令 ：
vue create helloworld
# 2. 控制台下，按照提示进入工程目录：
cd helloworld
# 3. 按照提示运行项目，如下图1
cnpm run serve
# 4. 打开控制台的项目地址，浏览器访问如下图2

2. Vue-Cli脚手架创建一个项目【Vue官网】

Vue-Cli脚手架官网创建新项目参考