第08讲：使用脚手架创建vue项目

一、安装NodeJS

二、配置环境变量

2.1、软件安装完成之后配置npm的环境变量

第1步：获取npm安装位置

使用管理员身份打开CMD，用如下命令获取npm的安装位置：

npm config list

第2步：配置环境变量

将以上获取的路径保存到path变量中

三、安装vue-cli

3.1、使用淘宝镜像

以管理员的身份运行CMD，并切换到NodeJS的安装目录
NodeJS的默认安装路径

命令行：

cd C:\Program Files\nodejs

Tip：如果是win10以上操作系统，并且NodeJS安装到了其他盘符（比如D盘），则需要在cd命令中添加/d参数，如：

cd /d D:\Program Files\nodejs

使用以下命令安装淘宝镜像

npm config set registry https://registry.npmmirror.com

点击回车之后不会有其他输出，但是已经成功设置了淘宝镜像（前提是以下命令书写正确，注意单词的书写）

3.2、安装vue-cli

使用以下命令安装vue-cli

npm install -g @vue/cli

接下来就是下载过程，如果下载的非常慢，就说明淘宝镜像没有设置成功，请审视一下自己的单词是不是有拼错的地方

Ps：出现WARN是正确的，只要不出现ERROR就行，安装完成之后会显示有多少个包已经被添加（added xxx packages in xxxm）

此时输入以下命令查看vue-cli的版本，如果可以正常显示，则别是vue-cli安装完成

vue -V

四、使用脚手架创建vue项目

在电脑中创建一个文件夹，位置随意，但由于考虑到文件权限问题，尽量不要使用c盘根目录，当前案例将文件夹创建在我的文档中

使用管理员权限运行CMD，并切换到当前位置

Ps：如果是win10以上版本系统无法直接通过cd命令切换到其他盘符，需要在cd命令中添加/d属性即可

使用如下命令在当前文件夹下创建项目demo01

vue create demo01

移动光标键选择[Manually select features]，按下回车键
按下回车键

当前的案例使用的是vue的2.x版本，选择2.x，按下回车键
在这个界面中，vue-cli 是在询问你：是将所有的配置都放在 pacakge.json 一个文件中，还是将各个功能的配置分开存放在独立的文件中？

选择第一项：分开存放。
按下回车键

在这里，vue-cli 是在询问你：是否将你的这些设置保留下来作为默认的项目设置的模板。默认值是 N 。
我们输入 N ，或者直接按回车确认进入安装界面：
当出现如下界面时，则表示项目成功创建