nvm环境安装

nvm是什么

NVM全称Node Version Manager,它是一个用于管理多个Node.js版本的工具,可以让你在同一台电脑中安装和使用不同版本的Node.js。

使用背景

nvm是一个管理nodejs版本的工具。在实际的开发中,有些项目的开发依赖需要低版本的nodejs运行环境,有些则需要高版本的nodejs,此时我们就需要使用nvm来切换nodejs版本。

①注意!!!安装之前先卸载干净本地node环境

  • 卸载现有 node 请注意,在安装适用于 WindowsNVM 之前,您需要卸载任何现有的 node.js 版本。还要删除所有可能保留的现有 nodejs 安装目录(例如,“C:\ Program Files \ nodejs”)。NVM 生成的符号链接不会覆盖现有的(甚至是空的)安装目录。

  • 卸载现有的 npm 您还应该删除现有的 npm 安装位置(例如 “C:\ Users \ < 用户> \ AppData \ Roaming \ npm”),以便正确使用 nvm 安装位置。

nvm的坑。

  1. 路径不能有中文,不能有空格,否则切换会有问题。
  2. 切换版本如果没变,把自己安装的nodejs删掉,因为这个可能没被加到版本管理,我list里边就没有。
  3. install版本失败,有可能需要给权限,cmd右键管理员启动即可

nvm,node,npm之间的区别。

nvm:nodejs 版本管理工具。
也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本。
nodejs:在项目开发时的所需要的代码库
npm:nodejs 包管理工具。
在安装的 nodejs 的时候,npm 也会跟着一起安装,它是包管理工具。
npm 管理 nodejs 中的第三方插件

nvm、nodejs、npm的关系:

nvm 管理 nodejs 和 npm 的版本。npm 可以管理 nodejs 的第三方插件。

nvm-windows下载地址

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

或者
https://nvm.uihtm.com/

安装

  • nvm-noinstall.zip: 这个是绿色免安装版本,但是使用之前需要配置
  • nvm-setup.zip:这是一个安装包,下载之后点击安装,无需配置就可以使用(推荐)。
  • Source code(zip):zip压缩的源码
  • Sourc code(tar.gz):tar.gz的源码,一般用于Linux系统

在电脑上选择一个目录解压该zip文件之后,双击nvm-setup.exe
选择好安装路径之后过程一路next即可,如果原来有node也会自动检测到。

安装过程参数下面连接
https://gitee.com/zhengqingya/java-developer-document/blob/master/知识库/前端/01-环境/01-nvm(windows安装).md

linux 、 mac 源码包下载地址

https://github.com/nvm-sh/nvm/releases

  1. 下载 Source code(tar.gz) 包,并解压
  2. 运行安装脚本 sh ./install.sh
  3. 重启终端,查看版本

查看版本:

C:\Users\Administrator>nvm version
1.1.10

安装后会自动加入环境亦是

$ cat ~/.zshrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

更多详细参考:

解决NVM下载慢的方法

1、使用淘宝源

淘宝源是NVM的一个非常好的替代品,可以加速NVM下载Node.js的速度。下面是使用淘宝源的命令:

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

常用命令

# 查看版本
nvm -v

# 显示可下载版本的部分列表
nvm list available

# 安装最新版本
nvm install latest
# 安装指定版本的 Node.js,例如 nvm install 21.6.0
nvm install 版本号

# 切换到指定版本的 Node.js 环境,例如 nvm use 21.6.0
nvm use 版本号
nvm use 21.6.0
# 列出当前已经安装的所有 Node.js 版本,其中带有 * 号的表示当前正在使用的版本
nvm ls
# 卸载指定版本的 Node.js。
nvm uninstall 版本号
# 查看当前node使用版本
nvm current
# 给一个 Node.js 版本设置别名,例如 nvm alias default 12.18.3 将默认版本设置为 12.18.3
nvm alias 别名 版本号
# 通过设置的别名切换到对应版本的 Node.js,例如 nvm use default
nvm use 别名

# 查看node安装的目录
youtai@macdeMacBook-Pro .nvm % npm root -g
/Users/youtai/.nvm/versions/node/v14.19.3/lib/node_modules

Mac OS 下 NVM 的安装与使用

nvm install stable ## 安装最新稳定版 node,当前是node v9.5.0 (npm v5.6.0)

nvm install ## 安装指定版本,可模糊安装,如:安装v4.4.0,既可nvm install v4.4.0,又可nvm install 4.4

nvm uninstall ## 删除已安装的指定版本,语法与install类似

nvm use ## 切换使用指定的版本node

nvm ls ## 列出所有安装的版本

nvm ls-remote ## 列出所有远程服务器的版本(官方node version list)

nvm current ## 显示当前的版本

nvm alias ## 给不同的版本号添加别名

nvm unalias ## 删除已定义的别名

nvm reinstall-packages ## 在当前版本 node 环境下,重新全局安装指定版本号的 npm 包

更多参考:
链接:https://www.jianshu.com/p/622ad36ee020

配置淘宝镜像

nvm安装不存在node和npm,默认源在国外,建议换国内源。

找到指定nvm安装目录后打开---settings.txt文件添加下面两行代码:

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

注意,这里设置的是安装node和npm本身的源,并不是设置安装node包的源,可以在选择好node后,执行

npm config set registry https://register.npm.taobao.org
npm config get registry 验证是否成功

nvm安装node

nvm list available:查看网络可以安装的版本
nvm install 21.6.0 安装指定版本
nvm list 查看已经安装版本
nvm use 21.6.0 切换node版本

更多版本查看连接:
https://nodejs.org/en/about/previous-releases

C:\Users\Administrator>nvm list

  * 21.6.0 (Currently using 64-bit executable)
    14.19.3
C:\Users\Administrator>node -v
v21.6.0	

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看版本
cnpm config set registry https://registry.npm.taobao.org //设置yarn的下载源为淘宝镜像
cnpm config get registry //查看镜像是否切设置成功

npm报错request to https://registry.npm.taobao.org/core-js failed, reason: getaddrinfo ENOTFOUND server

解决方法:

1、先执行这两个命令

npm config set proxy null   回车

npm config set https-proxy null   回车
npm cache clean --force  清空缓存
2、再执行: npm config set registry http://registry.cnpmjs.org/   回车
     或者:npm config set registry https://registry.npmmirror.com 设置环镜像源(淘宝)
3、最后执行:npm install -g cnpm --registry=https://registry.npm.taobao.org   回车

一般都能解决。

安装pnpm

% npm install -g pnpm
% pnpm -v 查看版本
9.9.0
% pnpm config get registry
https://registry.npmmirror.com
pnpm config set registry https://registry.npm.taobao.org  //设置yarn的下载源为淘宝镜像
pnpm config get registry //查看镜像是否切设置成功
https://registry.npm.taobao.org

安装yarn

npm install -g yarn --registry=https://registry.npm.taobao.org
yarn --version 或者 yarn -v 查看版本 1.22.19
yarn config set registry https://registry.npm.taobao.org //设置yarn的下载源为淘宝镜像
yarn config get registry //查看镜像是否切设置成功

cmd里运行vue项目命令

cd gin-vue-admin/web
yarn install
yarn run serve

安装vite

npm install -g vite
或者cnpm install -g vite
或者pnpm install vite

参考文档:
nvm详细安装步骤避坑指南以及使用(以win11系统为例)
https://blog.csdn.net/czj_com/article/details/127103504

浏览器插件

  • Vue.js devtools 可以看到vue页面变量的当前值
posted @ 2024-01-19 22:18  HaimaBlog  阅读(825)  评论(0编辑  收藏  举报