node详细讲解--包含nvm、node、npm、vue、vue-cli及环境变量配置

1、nvm版本选择及安装

1.1版本选择避雷

注意！！若是使用任何npm命令都会报错：“npm ERR! Unexcepted token=×××××××”，搜索后发现--nvm1.1.7版本不能成功安装node16以上，本人是看了网上的帖子说1.1.7版本比较稳定才安装的，没想到还有这一层bug。

这里选择的是当前nvm最新版本1.1.12

使用的下载路径：Releases · coreybutler/nvm-windows · GitHub

下载nvm-setup.zip压缩包，因为相关nvm的环境变量系统会自动配置，更加方便。

1.2安装步骤

1.2.1 nvm安装路径

E盘下新建文件夹Nvm即可，nvm是安装后自动建的。

1.2.2 nodejs安装路径

Nvm文件夹下新建nodejs文件，这里是换了安装路径，没有选择C盘路径。其次这个要注意，我自己在安装nvm成功之后曾出现过nodejs文件夹被自动删除的情况，若是出现这种情况，在cmd中使用nvm on语句，nodejs文件就会自动安装上（安装路径是环境变量中自动配置的nodejs的路径--即我们安装时想要它存在的路径）

1.2.3 安装即可

注意若是出现防火墙阻止它修改环境变量的话，选择允许该应用操作，就可以成功安装。

1.2.4 环境配置（自动的，可略过此条）

此时windows+R 输入cmd，可见以下自动配置

（1）用户变量中：自动配置了NVM的nvm、nodejs的两个变量路径，以及Path中NVM的两个变量路径。

（2）系统变量中：

（3）文件夹结构显示：

nvm文件夹中：

nodejs文件夹里：

1.2.5 配置路径和镜像

找到setting文件

在settings中添加信息：

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/，然后保存。

第一行是 nvm安装路径
第二行是 nodejs路径
第三行是 node下载镜像
第四行是 npm下载镜像

1.2.6 检测是否安装成功

输入nvm，显示这些就是成功的。

2、node及npm安装

2.1 node安装

2.2.1 选择版本

输入nvm list available 查询可插入的版本号，其中LST的表示可插入稳定版本，这里采用的是LST下的16.20.2版本。

2.2.2 安装命令

输入 nvm install 版本号

2.2.3 检测是否安装成功

输入node -v ,npm -v 。因为npm会配着node一起安装，所以这里是node,npm都安装了。

2.2.4 切换到当前版本

输入nvm use 版本号

输入nvm list 得到当前正在使用的版本--带*号的

文件夹显示：

2. 2全局配置安装：

注意：曾疑惑node_gobal、node_cache两个文件到底是放在nodejs文件夹下还是命令安装的node16.20.2文件夹下，然后我在node16.20.2文件夹下新建发现了两个文件夹--但之后发现nodejs里也显示了（因为在v16.20.2文件夹写了，所以nodejs文件夹显示的；同理我放在nodejs文件夹里写，v16.20.2文件夹里也会有√）

2.2.1 新建node_gobal、node_cache

这里采用的是在nodejs文件夹新建node_gobal、node_cache两个文件夹。

2.2.2 配置全局变量目录

然后在cmd框中输入：

npm config set prefix "E:\Nvm\nodejs\node_global" 配置全局安装位置 node-global 目录路径
npm config set cache "E:\Nvm\nodejs\node_cache" 配置缓存位置 node-cache 目录路径

 2.2.3 环境变量配置

（1）用户变量中：path中新建：E:\Nvm\nodejs\node_global 

（2）系统变量中新建NODE_PATH ,以及自己的路径：E:\Nvm\nodejs\node_global\node_modules（现在node_gobal里没有node_modules，但是后面会自动建）

（3）系统变量中 path中加%NODE_PATH%

2.2.4 测试全局配置express

执行npm install express -g 配置express

然后原本为空的文件夹node_gobal里，出现了文件夹node_modules，node_modules里出现了express文件夹。

 2.2.5 修改镜像路径

看2.1 node安装完成，npm管理器也存在了，若是想要提高安装速度，避免npm安装依赖包总是失败，可安装cnpm。npm config get registry检测npm默认下载地址（是npmjs.org），可切换安装的镜像(使用taoboa.org这条命令--切换为淘宝镜像)，然后再次检测npm地址，切换成功，使安装更快。

3、vue及vue-cli安装

3.1 先安装vue

命令：npm install -g vue

显示安装成功，看全局配置文件夹中也出现了vue(cnpm不用在意，也是这种方式全局配置的)

3.2 再安装vue-cli

全局配置安装：npm install -g @vue/cli（这里用该条命令安装脚手架）

注意：npm install -g vue/cli    适用于vue-cli 2

           npm install -g @vue/cli 适用于vue-cli 3

不需要在意警告，最后add....意味着安装成功。

3.3 环境变量配置

（1）系统变量新建VUE_PATH以及自己的路径：E:\Nvm\nodejs\node_global

（2）系统变量中 path中加%VUE_PATH%

4、结果显示

查看是否安装成功，以及对应的版本分别是什么