2024年vue 开发环境 Node.js于win10环境下的安装

导航

一、下载node.js

Node.js 官方网站下载：https://nodejs.org/en/download/

二、安装node.js

1. 双击安装包,会提示你是否安装这个可执行文件,选择是(我们在官网下的,不怕),点击next
2. 选择接收,点击next
3. 点击change改变安装位置(注意路径最好不要带中文),点击next
4. 点击next
5. 不选中,直接next
6. 点击install安装
7. 点击finish完成安装

三、测试(一)

win+r打开运行窗口,输入cmd并回车,在命令行界面输入以下代码:

 输入：node -v     // 显示node.js版本npm -v      // 显示npm版本

有相关信息出来就成功了

四、环境配置

1. 找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

2. 以管理员身份运行cmd,输入以下代码

   ①npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）
   ②npm config set cache “你的路径\node_cache” （复制你刚刚创建的“node_cache”文件夹路径）
   小技巧:打开你刚刚新疆的文件然后右击上面的地址就能复制了
   

   

3. 在刚刚新建的文件夹node_global里再新建一个名为node_modules的文件夹,并复制它的地址

4. 右击此电脑,选择属性,点击右边的高级系统设置,再点击下方的环境变量,在下方的系统变量中选择新建(不会的自行百度),变量名NODE_PATH,变量值就是刚刚复制的node_modules的地址

5. 点击用户变量里的path,将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径

6. 点击系统变量中的path,新建一个变量 %NODE_PATH%,确认即可

五、测试(二)

以管理员身份运行cmd,输入以下代码:npm install express -g

• -g代表全局安装

六、安装淘宝镜像

cnpm 是通过镜像的方式来提升 npm 包的下载速度，特别是在国内网络环境下。

1. 在命令行继续输入以下代码: npm config set registry https://registry.npmmirror.com
   • 查看是否成功的代码是:npm config get registry
2. 输入代码:npm install -g cnpm --registry=https://registry.npmmirror.com
   • 查看是否成功的代码:cnpm -v

本篇参考的博客是这位老哥的https://blog.csdn.net/Python_0011/article/details/132109189

七、安装vue脚手架

1. 依旧是管理员身份运行命令行,这里先安装webpack模板，输入以下命令进行安装

   npm install webpack -g
   npm install --global webpack-cli
   

2. 之后之后再输入以下命令进行安装vue相关文件。

   npm install vue -g   //安装vue.js
   npm install vue-router -g   //安装vue-router
   npm install vue-cli -g   //安装vue脚手架
   

3. 输入vue -V查看vue安装版本，如果成功显示版本号说明安装vue成功

4. 安装以上之后，配置vue的环境变量，找到vue.cmd的目录所在（如果忘记了安装在哪里，可以全盘搜索），复制路径，在系统变量的path中新增环境变量