[前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境


最近需要使用 Vite 及 Vue3 来开发项目,需要升级我本地的 Node V12版本,但基于本地 Node 版本已经开发了许多其他项目,直接升级会出现各种兼容性bug,于是便使用 nvm 来进行 Node 版本的管理,nvm 同时支持 Linux、Windows、Mac。

我这里以 Windows 环境为例,记录使用 nvm 进行 Node 版本及 Vue 的管理(React 及其他同理)。

nvm 安装

注意:安装前需要先卸载本地 Node 环境!!!
nvm 下载地址:http://nvm.uihtm.com/,选择自己的平台进行下载。

  1. 点击安装文件进入安装
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第1张图片
  2. 根据提示进行下一步
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第2张图片
  3. 选择 nvm 安装环境
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第3张图片
    安装路径任意指定,但需要注意的是安装目录名不要带中文或其他特殊字符。
  4. 选择 Node 安装环境
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第4张图片
  5. 最后进行安装
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第5张图片
  6. 在命令行中输入 nvm 检查是否安装成功

nvm 进行 Node 及 Vue管理

  1. 找到 nvm 安装目录下的 settings.txt 文件,更换配置源
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第6张图片
    在文件中添加
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

[前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第7张图片
2. 在命令行输入 nvm install 版本号 进行安装
[前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第8张图片

  1. 使用 nvm ls 查看已经安装的所有 Node 版本
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第9张图片
    其中带 * 的项即为当前使用版本,同时可以在安装目录下看到已经安装的所有 Node 环境
    [前端工具] 使用 nvm-windows 管理 Node 及 Vue 环境_第10张图片
  2. 使用 nvm use 版本号 使用指定 Node 版本
    在这里插入图片描述
  3. 使用 use 命令后,在当前 Node 环境进行脚手架安装,我这里以 Vue 为例,其他框架及包安装同理

    这里其实就和正常情况下的安装一样了,比如 yarn、webpack 等的安装。如果使用 npm 安装较慢的话,可以配置淘宝镜像源
npm config set registry http://registry.npm.taobao.org/
  1. 需要在另一 Node 环境中搭建项目环境时,再使用 nvm use 版本号 进行切换,然后进行其他操作
  2. 如果不需要某个 Node 的话,可以使用 nvm uninstall 版本号 进行卸载

你可能感兴趣的:(Web,vue.js,node,前端)