2024年vue 开发环境 Node.js于win10环境下的安装
导航
文章目录
- [2024年vue 开发环境 Node.js于win10环境下的安装](#2024年vue 开发环境 Node.js于win10环境下的安装)
- 导航
一、下载node.js
二、安装node.js
- 双击安装包,会提示你是否安装这个可执行文件,选择是(我们在官网下的,不怕),点击next
- 选择接收,点击next
- 点击change改变安装位置(注意路径最好不要带中文),点击next
- 点击next
- 不选中,直接next
- 点击install安装
- 点击finish完成安装
三、测试(一)
win+r打开运行窗口,输入cmd并回车,在命令行界面输入以下代码:
输入:node -v // 显示node.js版本
npm -v // 显示npm版本
有相关信息出来就成功了
四、环境配置
-
找到安装的目录,在安装目录下新建两个文件夹【node_global】和【node_cache】
-
以管理员身份运行cmd,输入以下代码
①npm config set prefix "你的路径\node_global" (复制你刚刚创建的"node_global"文件夹路径) ②npm config set cache "你的路径\node_cache" (复制你刚刚创建的"node_cache"文件夹路径) 小技巧:打开你刚刚新疆的文件然后右击上面的地址就能复制了
-
在刚刚新建的文件夹node_global里再新建一个名为node_modules的文件夹,并复制它的地址
-
右击此电脑,选择属性,点击右边的高级系统设置,再点击下方的环境变量,在下方的系统变量中选择新建(不会的自行百度),变量名
NODE_PATH
,变量值就是刚刚复制的node_modules的地址 -
点击用户变量里的path,将默认的 C 盘下【
AppData\Roaming\npm
】修改成 【node_global】的路径
-
点击系统变量中的path,新建一个变量
%NODE_PATH%
,确认即可
五、测试(二)
以管理员身份运行cmd,输入以下代码:npm install express -g
- -g代表全局安装
六、安装淘宝镜像
cnpm 是通过镜像的方式来提升 npm 包的下载速度,特别是在国内网络环境下。
- 在命令行继续输入以下代码:
npm config set registry https://registry.npmmirror.com
- 查看是否成功的代码是:
npm config get registry
- 查看是否成功的代码是:
- 输入代码:
npm install -g cnpm --registry=https://registry.npmmirror.com
- 查看是否成功的代码:
cnpm -v
- 查看是否成功的代码:
本篇参考的博客是这位老哥的https://blog.csdn.net/Python_0011/article/details/132109189
七、安装vue脚手架
-
依旧是管理员身份运行命令行,这里先安装webpack模板,输入以下命令进行安装
npm install webpack -g npm install --global webpack-cli
-
之后之后再输入以下命令进行安装vue相关文件。
npm install vue -g //安装vue.js npm install vue-router -g //安装vue-router npm install vue-cli -g //安装vue脚手架
-
输入vue -V查看vue安装版本,如果成功显示版本号说明安装vue成功
-
安装以上之后,配置vue的环境变量,找到vue.cmd的目录所在(如果忘记了安装在哪里,可以全盘搜索),复制路径,在系统变量的path中新增环境变量