在 macOS 上管理 Node.js 版本，选择合适的工具至关重要。这不仅能让你在不同的项目中使用不同版本的 Node.js，还能避免权限问题，提升开发效率。

目前主流的工具有 nvm、fnm 和 Volta，它们各有侧重，你可以根据自己的需求来选择。

🧰 主流 Node 版本管理工具对比

表格

工具	核心特点	适用场景
nvm	社区最流行，资源最丰富，命令直观。	需要广泛社区支持和丰富教程的开发者。
fnm	基于 Rust 开发，速度极快，支持目录切换时自动切换版本。	追求极致性能和自动化体验的开发者。
Volta	将 Node 和包管理器版本写入 package.json，实现项目级环境自动切换。	团队协作，希望统一项目环境，避免“在我机器上是好的”问题。

下面为你详细介绍这三种工具的安装和使用方法。

---

1. NVM (Node Version Manager)

NVM 是目前最流行、最成熟的版本管理工具，拥有庞大的用户基础和丰富的文档。

安装

在终端执行以下命令进行安装：

bash

编辑

1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

安装完成后，需要重启终端或执行 source ~/.zshrc 让配置生效。

常用命令

• 安装指定版本: nvm install 18.16.0
• 切换版本: nvm use 18.16.0
• 查看已安装版本: nvm list
• 设置默认版本: nvm alias default 18.16.0
• 查看远程所有可用版本: nvm list-remote

---

2. FNM (Fast Node Manager)

正如其名，fnm 的最大亮点就是快。它由 Rust 编写，性能远超基于 Shell 脚本的 nvm。它还支持在进入项目目录时自动切换 Node 版本。

安装

bash

编辑

1curl -fsSL https://fnm.vercel.app/install | bash

安装后，请根据终端提示配置环境变量。为了实现自动切换，需要在 ~/.zshrc 中添加 eval "$(fnm env --use-on-cd)"。

常用命令

• 安装指定版本: fnm install v20.10.0
• 切换版本: fnm use v20.10.0
• 查看已安装版本: fnm list
• 设置默认版本: fnm default v20.10.0

---

3. Volta

Volta 的理念非常独特，它将 Node.js 和包管理器（如 pnpm、yarn）的版本信息直接写入项目的 package.json 文件中。这意味着，任何安装了 Volta 的开发者，在进入项目目录时，都会自动切换到项目指定的环境，非常适合团队协作。

安装

bash

编辑

1curl https://get.volta.sh | bash

常用命令

• 安装 Node.js: volta install node@18

• 为当前项目锁定版本:

  1. 进入你的项目目录。
  2. 执行 volta pin node@18。
  3. 你会发现 package.json 中多了一个 volta 字段，里面记录了锁定的版本。

---

💡 国内加速小贴士

由于网络原因，直接安装 Node.js 版本可能会很慢或失败。你可以配置镜像源来加速下载。

• 对于 NVM:

  bash

  编辑

  1export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
  

  建议将此行添加到 ~/.zshrc 文件中，使其永久生效。

• 对于 FNM:

  bash

  编辑

  1export FNM_NODE_DIST_MIRROR=https://npmmirror.com/mirrors/node/
  

  同样，建议添加到 ~/.zshrc 文件中。

总结与建议

• 追求稳定和丰富资源：选择 NVM。
• 追求极致速度和自动化：选择 FNM。
• 团队协作，统一环境：选择 Volta。

重要提示：请避免同时使用多个版本管理工具，这可能会导致环境变量冲突，引发意想不到的问题。选择最适合你的一个即可。

针对 datetime-picker 或 el-date-picker 设置 type="daterange" 修改选中颜色，通常涉及两个部分的样式修改：

1. 输入框边框颜色：即选中该组件时，外围边框的高亮颜色。
2. 日历面板选中颜色：即点击日期后，日历面板上日期范围的背景色。

由于不确定你具体使用的是 Element UI (Vue 2) 还是 Element Plus (Vue 3) ，我为你整理了这两种情况下的解决方案。

1. 修改输入框边框颜色 (Focus 状态)

当输入框获得焦点（被选中）时，Element UI 默认会有一个蓝色的外边框或阴影。你可以通过覆盖 CSS 变量或直接修改类名来改变它。

Element Plus (Vue 3)

Element Plus 推荐使用 CSS 变量来修改，这样更规范且容易维护。

/* 修改选中时的边框颜色 */
.el-date-picker {
  --el-input-focus-border-color: #FF6A00; /* 你想要的颜色 */
}

/* 如果是范围选择器，可能需要强制覆盖 box-shadow */
:deep(.el-range-editor.is-active) {
  box-shadow: 0 0 0 1px #FF6A00 inset !important;
}

Element UI (Vue 2)

Element UI 通常需要通过深度选择器来修改边框颜色。

/* 修改边框颜色 */
/deep/ .el-range-editor.is-active {
  border-color: #FF6A00;
}

/* 修改阴影颜色 (部分版本生效) */
/deep/ .el-range-editor.is-active {
  box-shadow: 0 0 2px 0 rgba(255, 106, 0, 0.5); 
}

---

2. 修改日历面板选中范围颜色

这部分比较特殊，因为日期选择器的下拉面板默认是挂载在 body 下的，而不是组件内部。因此，普通的 scoped 样式可能无法生效。

关键步骤： 你需要给 datetime-picker 添加 popper-class 属性，以便定位到下拉面板。

第一步：HTML 模板设置

<el-date-picker
  v-model="dataValue"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  popper-class="custom-date-range-picker" <!-- 添加这个自定义类名 -->
  :teleported="false" <!-- Element Plus 建议加上这个，防止挂载到 body 导致样式难穿透 -->
>
</el-date-picker>

第二步：CSS 样式设置

你需要使用全局样式（去掉 scoped）或者使用深度选择器配合 popper-class 来修改选中背景色。

/* 针对 Element UI / Element Plus 通用逻辑 */

/* 1. 选中范围的背景色 (开始日期和结束日期中间的区域) */
.custom-date-range-picker .el-date-table td.in-range div,
.custom-date-range-picker .el-date-table td.in-range div:hover {
  background-color: #FFE0B2; /* 浅色背景 */
}

/* 2. 开始日期和结束日期的选中圆点/背景 */
.custom-date-range-picker .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
  background-color: #FF6A00; /* 深色主色调 */
  color: #fff;
}

/* 3. 鼠标悬停时的颜色 */
.custom-date-range-picker .el-date-table td:hover:not(.in-range) div {
  color: #FF6A00;
}

---

3. 常见问题排查

如果你发现样式写了但不生效，请检查以下几点：

1. 样式作用域：

   • 如果你使用的是 <style scoped>，必须使用深度选择器，如 ::v-deep (Vue 2/3) 或 :deep() (Vue 3)。
   • 最稳妥的方法：将上述 CSS 代码放在一个不包含 scoped 的 <style> 标签中，或者放在全局 CSS 文件中。

2. 挂载位置：

   • 如果下拉面板挂载在 body 上，你的组件 scoped 样式是绝对无法直接穿透的。务必使用 popper-class 属性来“钩住”下拉面板。

3. 优先级：

   • 如果样式依然不生效，可以在 CSS 属性后加上 !important 强制覆盖。

总结表格

修改目标	Element Plus (Vue 3) 推荐写法	Element UI (Vue 2) 推荐写法
输入框边框	修改 --el-input-focus-border-color 变量	覆盖 .el-range-editor.is-active 的 border-color
下拉面板样式	添加 popper-class + :teleported="false"	添加 popper-class + 全局 CSS
选中背景色	覆盖 .el-date-table td.in-range div	同上