【nvm】安装nvm及node、vue-cli、淘宝镜像初始化安装

一、nvm常用命令

查看已安装的node版本号

nvm ls

查看目前可用的node.js版本号

nvm ls available

安装node

nvm install 版本号

卸载node

nvm uninstall 版本号

切换node

nvm use 版本号

二、nvm安装

1、安装前先清除node的所有数据及缓存

2、下载，选择nvm_setup.zip

https://github.com/coreybutler/nvm-windows/releases

3、无脑安装

4、添加配置

安装成功后打开nvm的安装目录，找到settings.txt文件，添加镜像源

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

三、node安装

1、下载node

nvm install 版本号

2、使用node

nvm use 版本号

3、配置node的缓存全局仓库

在下载好的node文件下，新建两个文件夹，node_cache：缓存文件夹，node_global：全局仓库文件夹。

4、输入命令

npm config set prefix="D:\nodejs\node_global"
npm config set cache="D:\nodejs\node_cache"

5、配置环境变量

右键“我的电脑”=>属性=>高级系统设置=>环境变量 进入以下环境变量对话框

• 在【系统变量】新建环境变量NODE_PATH:D:\nodejs\node_global\node_modules；
• 修改【用户变量】中的path变量，将C:\Users\xxx\AppData\Roaming\npm修改为D:\nodejs\node_global;
• 没有npm的配置的话直接加到最后面。

6、检验全局的npm、node命令是否有效。

如果npm -v查询失败，说明npm安装出错或者环境变量没配置好。

node -v
npm -v

7、关闭所有打开的vscode窗口，重新运行项目

注：切换node时记得添加 缓存 和 全局仓库 文件夹

四、注意事项

1、全局依赖无法使用

如果安装了全局的依赖无法使用，那么管理员打开cmd

先查看npm 配置信息 npm config list

; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.16 node/v12.22.12 win32 x64"

; userconfig C:\Users\Administrator\.npmrc
CHROMEDRIVER_CDNURL = "https://npmmirror.com/mirrors/chromedriver"
ELECTRON_BUILDER_BINARIES_MIRROR = "https://npmmirror.com/mirrors/electron-builder-binaries/"
ELECTRON_MIRROR = "https://npmmirror.com/mirrors/electron/"
NVM_NODEJS_ORG_MIRROR = "https://npmmirror.com/mirrors/node"
OPERADRIVER = "https://npmmirror.com/mirrors/operadriver"
PYTHON_MIRROR = "https://npmmirror.com/mirrors/python"
cache = "D:\\nodejs\\node_cache"
chromedriver_cdnurl = "https://npmmirror.com/mirrors/chromedriver"
https-proxy = "http://127.0.0.1:31181/"
phantomjs_cdnurl = "https://npmmirror.com/dist/phantomjs"
prefix = "D:\\nodejs\\node_global"
proxy = "http://127.0.0.1:31181/"
sass_binary_site = "https://npmmirror.com/mirrors/node-sass"
strict-ssl = false

; node bin location = D:\nodejs\node.exe
; cwd = C:\Users\Administrator
; HOME = C:\Users\Administrator
; "npm config ls -l" to show all defaults.

如果prefix的配置不是node_global那就修改全局安装路径

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

五、vue/cli安装

安装了脚手架就可以通过可视化页面创建vue项目

1、安装vue

// 先查看vue版本号，没有就安装
vue -V
// 安装vue
npm install -g vue

2、安装脚手架 vue/cli

//安装脚手架
npm install -g @vue/cli
//查看版本号
vue -V

3、使用（无需创建项目省略这一步）

• 可视化创建项目：打开cmd运行vue-ui，打开可视化项目管理器，创建项目
• 命令行创建项目：vue create 项目名

六、vue/cli-init安装

1、安装@vue/cli-init

npm install -g @vue/cli-init

2、使用（无需创建项目省略这一步）

vue init webpack 项目名

注意事项

输入命令后出现以下错误：是因为脚手架在创建的时候从github里下载webpack失败了

Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.252.131:443

解决方法：

采用离线创建项目：在github下载 vuejs-templates/ webpack 包，解压到用户目录。比如C:\Users\Administrator\.vue-templates\webpack，没有.vue-templates\webpack文件就自行创建。

之后创建项目，命令后面加上 --offline

vue init webpack 项目名 --offline

七、安装淘宝镜像

1、安装

// 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 查看版本号，如果查看失败试试配置环境变量
cnpm -v

2、配置环境变量

右键“我的电脑”=>属性=>高级系统设置=>环境变量 进入以下环境变量对话框

• 添加【用户变量】中的path变量，D:\nodejs\node_global;

3、注意事项（无报错可忽略这一步）

如果cnpm -v 报错或使用淘宝镜像过程中，以下报错是版本太高导致的：

• Error: Cannot find module 'node:util'
• Error: Cannot find module 'fs/promises'

降低版本就可以解决了

// 成功查看版本号
cnpm -v

cnpm@8.0.0 (D:\nvm\v12.22.12\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.18 (D:\nvm\v12.22.12\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.22.12 (D:\nodejs\node.exe)
npminstall@6.7.1 (D:\nvm\v12.22.12\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\nodejs\node_global
win32 x64 10.0.18363
registry=https://registry.npmmirror.com

八、总结

nvm use 版本号 切换node版本时，就是一个新环境，记得检查npm/cnpm/vue-cli及其他常用命令是否能正常使用，及时排查问题。如果没有初始化，可以按照以上步骤安装。