Node.js和Vue的安装与配置（超详细步骤）

Posted 2023-04-02 随遇而安ing

目录

• • 一、下载
  • 二、安装
  • 三、配置
  • 四、安装配置vue
  • 五、构建运行Vue项目

一、下载

Node.js官网下载
大家根据自己的系统进行下载安装包（我的电脑是windows10-64位，所以下载第一个）

二、安装

点击下载的安装包进行安装

点击Next

打勾并点击Next

默认安装路径是C:\\Program Files\\nodejs\\，我这里选择在D:\\Program Files\\nodejs\\目录下安装,点击Next

点击Next

点击Next

点击Install

安装完成点击Finish

安装完成后Node.js会自动将node配置到环境变量中，我们打开Windows的cmd窗口输入node -v，查看node版本

输入npm -v，看到npm版本

三、配置

在cmd窗口输入npm root -g，查看全局安装的模块所在目录

在安装的目录下新建两个文件夹node_cache和node_global

打开cmd命令窗口，配置全局安装的模块路径（注意"D:\\Program Files\\nodejs\\node_global"是我电脑上的安装路径，你们以自己电脑实际安装路径进行替换）
npm config set prefix “D:\\Program Files\\nodejs\\node_global”

配置缓存路径（注意路径）
npm config set cache “D:\\Program Files\\nodejs\\node_cache”

在cmd窗口输入npm root -g，即可看见全局安装的模块路径已经切换成我们配置的路径了

为了之后使用npm下载东西时速度快一些，需要配置镜像站，这里选择淘宝镜像，打开cmd输入

npm config set registry=http://registry.npm.taobao.org

输入npm config get registry，输出http://registry.npm.taobao.org/即表示配置成功

现在配置一下Node.js的环境变量，设置环境变量的目的是在任何目录都可以执行node和vue命令。
windows10可以使用搜索功能搜索环境变量，点击编辑系统环境变量

点击环境变量

找到Path，点击编辑

点击新建，我电脑的node_global路径是"D:\\Program Files\\nodejs\\node_global"，配置完成后点击确定，关闭环境变量配置的所有窗口

四、安装配置vue

输入npm info vue，查看是否能够获取vue信息，这里报下图的错误话需要使用windows PowerShell管理员模式

右键左下角的windows图标选择windows PowerShell（管理员），输入npm info vue即可


输入npm install vue -g 开始安装vue

输入npm i @vue/cli -g 开始安装Vue-cli脚手架

五、构建运行Vue项目

我在D盘创建了一个demo目录，在命令行使用cd D:\\demo进入到了demo目录，准备构建第一个vue项目

输入vue create first，出现下面的提示，让选择创建Vue3还是Vue2的项目，我这里选择Vue3直接回车
（注意这里可能出现“vue : 无法加载文件 D:\\Program Files\\nodejs\\node_global\\vue.ps1，因为在此系统上禁止运行脚本。”的问题，解决方案请参考我的这篇文章https://blog.csdn.net/qq_35156196/article/details/127576640?spm=1001.2014.3001.5502）

这张图片是vue项目已经构建好了

输入cd first，再输入npm run serve，即可成功运行vue项目

打开浏览器输入http://localhost:8080/即可访问vue的页面了

Node.js安装及配置环境与卸载教程（最新版，超详细，保姆级）

Node.js 的安装和配置环境（最新版，超详细，保姆级）安装配置教程

1.去node.js的官网下载对应的安装包

下载官网： http://nodejs.cn/download/
版本选择： ① .msi版本是Windows 安装包，长期稳定维护版 （这里我们选择这个版本介绍） ②.zip是压缩包形式，解压即可，不用需要安装

2.运行安装包进入安装界面

2.1 第一步next ->
2.2 接收协议next ->

2.3 进入安装路径设置自己的安装位置 next-> (这里提一句，随着后续项目的扩大，需要安装的包会越来越多，建议是不要装在C盘)

2.4 安装node相关的配置默认 next->

2.5 这一步必须把这个勾号取消， 不取消会从外网下载其他的配置，网速会很慢. next->

2.6 点击install 开始安装 next->

2.7 安装完毕

3. 安装成功后打开cmd输入指令查看是否成功

1. 检查node 的环境变量是否配置好,出现版本号及为成功

node -v

2. 查看npm是否安装成功，现在新版的会自动附带安装 npm，旧版本则需自己下载

npm -v

4.配置全局模块安装路径

主要目的：①改变安装NodeJS依赖的下载位置，方便日后管理 ②以及配置缓存Cache的路径。
系统默认配置是在 C:\\Users\\用户名\\AppData\\Roaming\\npm
第一步找到你下载nodejs的位置，创建红框勾选的2个文件夹 node_cachel 和node_global

1.将下载库设置为你刚才创建的node_global文件夹
无响应就是最好的相应

npm config set prefix "D:\\MySoftware\\nodejs\\node_global"

2.将缓存库设置为你刚才创建的node_cachel文件夹
无响应就是最好的相应

npm config set cache "D:\\MySoftware\\nodejs\\node_cache"

3.配置国内镜像
如果不配置，那就是通过国外网站下载，可能一天都导不了一个包，这里我们用国内的淘宝镜像
查看修改淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看上述三个步骤是否配置成功

npm config list

被我画上蓝色的是我的用户名，不用理会，关注红框内的即可，说明是已经配置成功了

4.配置电脑环境
开始之前我先做3点总结：
Ⅰ. 用户变量 …\\node_global
Ⅱ.环境变量NODE_PATH配成 …\\node_global\\node_modules(和Ⅰ一样，只是多了一级子目录)，记得path中增加%NODE_PATH%
Ⅲ.path中配置nodejs的安装目录，…\\nodejs\\，注意和Ⅰ、Ⅱ可能不是同一个目录
下面我们开始：
① 左下角搜索框直接搜索 高级，点击打开。也可以右击桌面上我的电脑，然后点击属性，再点击右边的高级系统设置

②点击环境变量

③点击新建

④ 这里做一下解释，明明刚刚创建的node_global是空的，变量值的路径最后为什么要到node_moudles，因为后续你只要下载第一个包，它会自动在node_global创建一个node_moudles，所以这里路径要到node_moudles

⑤ 点击新建， 加上 %NODE_PATH% (必须) ，然后将系统默认的C:\\Users\\用户名\\AppData\\Roaming\\npm 更改为你npm对应的路径，可以与我不同，根据你直接的路径更改

点击确定，确定，确定

5.测试

我们打开dos窗口，执行以下命令，下载一个express模块 （有些朋友下载会报错，那就在系统搜索框内搜索cmd，然后右击以管理员身份运行）

npm install express -g      # -g  是全局安装的意思

以下是添加包成功，用时2秒（就是下载成功了）

打开你的node_global下面的node_moudules就会出现以下箭头所指文件夹

完结留言：

到此为止就彻底大功告成了，如果有朋友某个步骤出了小问题，回头重新修改即可。也可以在通过系统卸载，从新再来，如果要卸载需要将已经配置的系统环境全部删除，然后将以下文件夹删除干净(在查看中点击查看隐藏文件夹AppData就会出现)

C:\\Program Files (x86)\\Nodejs
C:\\Program Files\\Nodejs
C:\\UsersUser\\AppData\\Roaming\\npm（或%appdata%\\npm）
C:\\UsersUser\\AppData\\Roaming\\npm-cache（或%appdata%\\npm-cache）