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

导航

2024年vue 开发环境 Node.js于win10环境下的安装导航一、下载node.js二、安装node.js三、测试(一)四、环境配置五、测试(二)六、安装淘宝镜像七、安装vue脚手架

一、下载node.js

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

二、安装node.js

  1. 双击安装包,会提示你是否安装这个可执行文件,选择是(我们在官网下的,不怕),点击nextimage-20240315105146884

  2. 选择接收,点击nextimage-20240315105302785

  3. 点击change改变安装位置(注意路径最好不要带中文),点击nextimage-20240315105632416

  4. 点击nextimage-20240315110039572

  5. 不选中,直接nextimage-20240315110418790

  6. 点击install安装image-20240315110504030

  7. 点击finish完成安装image-20240315110557450

三、测试(一)

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

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

有相关信息出来就成功了

四、环境配置

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

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

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

    image-20240315111914619

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

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

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

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

五、测试(二)

以管理员身份运行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中新增环境变量