搭建vue-cli手脚架

安装node.js

nodejs下载链接：Index of /download/release/v14.21.3/

我下载的是

安装程序

可以更改下载路径

在cmd终端端口，验证是否下载成功

环境配置

在刚安装的目录下，新建俩个新的文件夹 【node_global】和【node_cache】

配置仓储和缓存目录

创建完毕后，复制这俩个文件夹的路径

使用管理员打开cmd命令窗口，输入以下命令

npm config set prefix "D:\vue\nodejs\node_global"
npm config set cache "D:\vue\nodejs\node_cache"

可以输入以下俩条命令检查路径是否配置正确

配置环境变量

系统变量

设置--系统--系统信息--高级系统设置--环境变量

在【系统变量】中选择【Path】点击【编辑】后点击新建【%NODE_PATH%】，随后一直点击【确定】直到关闭所有窗口即可。

变量名：NODE_PATH

变量值：复制刚刚的node_global路径并在后面添加\node_modules

编辑用户变量

默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径，点击【确定】

 

感觉没有用的环境变量

最终我的环境变量

配置镜像源（淘宝镜像）

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

//检查当前的镜像源
npm config get registry

设置文件的权限，此处直接执行会显示EPERM

解决方法：

安装vue/cli

//执行脚手架模块名称
npm install @vue/cli -g

//检查是否安装成功（注：先关掉命令行，重新进入）
vue -V
//或者
vue --version

安装cnpm

//按照源下载，我用了报错
npm install -g cnpm --registry=https://registry.npmmirror.com

//我直接指定了相关的版本号，因为考虑了兼容性的问题
npm install -g cnpm@7.1.1


//检验
cnpm -v

//安装webpack
npm install webpack@3.6.0 -g

//安装pm2
cnpm i -g pm2

//可以直接利用pm2来驱动项目
pm2 start node.js

手脚架创建一个vue项目

a、命令行进入新建的项目目录，执行：vue create 项目名

---

b、选择你项目开发时使用的vue版本（上下键选择，回车确认），这里用vue2

回车选中后会创建项目，按照命令行上的提示--运行项目

 

遇到的问题：系统禁止运行脚本

解决：

通过powershell改变策略

根据提示，访问项目： http://localhost:8080/

参考文档：链接