使用CLI脚手架搭建Vue2项目

一、配置前端的环境

1、下载安装Node.js

网址：Node.js 中文网 (nodejs.com.cn)

参考：【简明图文教程】Node.js的下载、安装、环境配置及测试_node下载安装-CSDN博客

推荐安装路径C盘改为D盘

2、配置nodejs及环境变量【安装的时候勾选Add to PATH就不用配置】

npm全局模块的安装路径以及缓存cache的路径。

（1）nodejs下新建两个文件夹【node_global】和【node_cache】

（2）打开cmd，建议管理员身份（路径是刚刚新建的路径）

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

（3）配置环境变量

①打开窗口：依次执行【此电脑】-->【右键】-->【属性】-->【高级系统设置】-->【高级】-->【环境变量】，打开环境变量设置窗口

②系统变量点新建

输入变量名和变量值
变量名：NODE_PATH
变量值：D:\ProgramFiles\nodejs\node_global\node_modules

③检查

打开文件夹【node_global】，查看是否有多出了一个【node_modules】文件夹

注：如果 文件夹【node_global】里没有出现 【node_modules】文件夹，则在【node_global】下手动创建一个【node_modules】文件夹，再复制你创建的【node_modules】文件夹的路径地址到变量值。

④选中系统变量Path，点击编辑，追加

D:\Program Files\nodejs\

%NODE PATH%

3、检查node和npm是否安装成功

二、安装Vue CLI

1、命令行安装Vue CLI

npm install -g @vue/cli

如下，执行成功（管理员身份运行）

2、成功结果

三、创建新项目

提示：需要使用管理员身份，否在报错，如下图

1、命令行新建项目

win键cmd选择使用管理员身份打开，F:或者其他目标盘，cd跳转到目标文件中，输入命令行

vue create your-project-name

需要选择是否需要下载可以点Y

提示选择preset， 选择Vue2即可

提示选择，npm即可

示意图如下：

2、用VS Code管理员身份打开项目，运行

npm run serve

运行成功标志：

你可以在浏览器中访问 http://localhost:8080 来预览你的应用。

按住ctrl点击连接也可以打开浏览器