3.9开发前端常用的几个工具(nvm,json-server,nrm)

nvm

• 多项目开发：当需要同时开发多个项目，而这些项目使用不同的 Node.js 版本时。

• nvm（Node Version Manager）是一种用于管理和切换Node.js版本的工具。它允许开发人员在同一台计算机上同时安装和使用多个不同的Node.js版本，并且可以轻松地在这些版本之间进行切换。

下载地址

https://nvm.uihtm.com/

安装NVM

正常安装，安装位置选择目录没有夹杂空格的目录即可。

NVM换源

将如下代码加入settings.txt文件中。

node_mirror: https://npmmirror.com/mirrors/node
npm_mirror: https://npmmirror.com/mirrors/npm

NVM命令

nvm version                // 查看NVM版本，是否安装成功
nvm list available         // 查看可安装的node版本
nvm list                   // 查看已安装的node版本
nvm install 版本号          // 安装node
nvm uninstall 版本号        // 卸载node
nvm use 版本号              // 切换使用node版本
nvm current                // 当前使用node版本
nvm node_mirror [url]      // 切换node镜像[https://npm.taobao.org/mirrors/node/]
nvm npm_mirror [url]       // 切换npm镜像[https://npm.taobao.org/mirrors/npm/]
nvm alias default version  // 设置默认版本 

常见问题

• nvm use 版本号失败：使用管理员权限运行PowerShell。
• 安装node成功，对应版本的npm安装失败，去node官网下载对应版本放在node对应版本文件夹下。

 json-server

json-server 是一个基于 Node.js 的开源工具，它能用一行命令为你启动一个全功能的 RESTful API 服务器，数据存储在一个本地的 JSON 文件中。

它非常适合：

• 前端开发者快速搭建 Mock API（模拟后端接口）
• 学习 REST API 设计
• 快速原型开发（MVP）
• 与前端框架配合使用

---

 核心特性

特性	说明
🚀 零代码 API	只需一个 db.json 文件，即可生成 API
🔁 RESTful 路由	自动生成 GET, POST, PUT, PATCH, DELETE 接口
🔍 支持查询	支持过滤、分页、排序、全文搜索
🔄 实时更新	数据变更后自动保存到 JSON 文件
⚙️ 可配置	支持自定义路由、中间件、端口等
📦 轻量级	无需数据库，依赖少，启动快

---

 安装 json-server

确保你已安装 Node.js 和 npm。

npm install -g json-server

✅ 全局安装后，即可在任意目录使用 json-server 命令。

验证安装：

json-server --version
# 输出版本号，如：0.17.4

---

 快速开始：3 步搭建 API 服务

第 1 步：创建 db.json 文件

{"users": [{"id": 1,"name": "张三","email": "zhangsan@example.com","age": 25},{"id": 2,"name": "李四","email": "lisi@example.com","age": 30}],"posts": [{"id": 1,"title": "第一篇文章","author": "张三","userId": 1}]
}

第 2 步：启动服务器

json-server --watch db.json

• --watch：监听文件变化，实时更新 API

第 3 步：访问 API

服务器默认运行在 http://localhost:3000

请求	URL	说明
GET	http://localhost:3000/users	获取所有用户
GET	http://localhost:3000/users/1	获取 ID 为 1 的用户
POST	http://localhost:3000/users	创建新用户（JSON Body）
PUT	http://localhost:3000/users/1	替换用户数据
PATCH	http://localhost:3000/users/1	部分更新用户数据
DELETE	http://localhost:3000/users/1	删除用户

---

 高级查询功能（无需编码）

json-server 支持丰富的查询参数，类似数据库查询。

1. 过滤（Filter）

GET /users?age=25
GET /users?name=张三&age=25

2. 模糊搜索（q）

GET /users?q=张

对所有字段进行全文搜索。

3. 分页（Pagination）

GET /users?_page=1&_limit=10

• _page：页码（从 1 开始）
• _limit：每页数量

响应头中会包含 X-Total-Count 和分页信息。

4. 排序（Sort）

GET /users?_sort=name&_order=asc
GET /users?_sort=age&_order=desc

5. 范围查询

GET /users?age_gte=25&age_lte=30

• _gte：大于等于
• _lte：小于等于
• _ne：不等于
• _like：模糊匹配（正则）

---

 高级配置

1. 自定义端口和主机

json-server --watch db.json --port 4000 --host 0.0.0.0

2. 使用配置文件 json-server.json

创建 json-server.json：

{"port": 4000,"host": "127.0.0.1","watch": true,"routes": "routes.json"
}

启动：

json-server db.json

nrm

nrm（Node Registry Manager）是一个用于管理 npm 包下载源（registry） 的命令行工具。它可以帮助你在不同的 npm 镜像源之间快速切换，从而加速 npm install 的下载速度，尤其在中国大陆等网络环境下非常实用。

⚠️ 注意：nrm 不安装或管理 Node.js 版本（那是 nvm 的职责），它只管理 npm 的包源（registry）。

---

为什么需要 nrm？

npm 默认的包源是：https://registry.npmjs.org/
但在国内访问这个地址非常慢，甚至超时。

nrm 允许你：

• 快速切换到更快的镜像源（如淘宝、腾讯、华为等）
• 测试各源的响应速度
• 自定义私有源
• 提升 npm install 的效率

---

 安装 nrm

npm install -g nrm

✅ 需要管理员权限（Windows）或 sudo（macOS/Linux）

验证安装：

nrm --version
# 输出版本号，例如：6.1.0

---

 常用命令详解

1. 查看所有可用的源（nrm ls）

nrm ls

输出示例：

* npm -------- https://registry.npmjs.org/cnpm ------- http://r.cnpmjs.org/taobao ----- https://registry.npmmirror.com/npmMirror -- https://skimdb.npmjs.com/registry/edunpm ----- http://registry.enpmjs.org/aliyun ------ https://registry-mirror.alpm.com/

• * 表示当前正在使用的源。

---

2. 切换源（nrm use <registry>）

nrm use taobao

将 npm 的下载源切换为 淘宝镜像（目前最稳定、最快的国内镜像之一）。

---

3. 测试源速度（nrm test <registry>）

nrm test npm
nrm test taobao

输出响应时间（毫秒），帮助你选择最快的源：

npm ---- 1200ms
taobao - 200ms (推荐)

---

 nrm 如何工作？

nrm 实际上是修改了 npm 的配置文件 .npmrc 中的 registry 字段。

你可以通过以下命令查看当前 registry：

npm config get registry

当你执行 nrm use taobao 时，等价于：

npm config set registry https://registry.npmmirror.com/

---

 注意事项

1. nrm 只影响 npm，不影响 yarn 或 pnpm

   • yarn 使用：yarn config set registry <url>
   • pnpm 使用：pnpm set registry <url>

2. 切换源后，全局包安装路径不变

   • nrm 不改变 Node.js 或 npm 的安装位置。

3. 源切换是全局的

   • 所有项目都会使用新的 registry，除非项目中有 .npmrc 文件覆盖。

4. 安全提醒

   • 不要随意添加不可信的私有源，避免安装恶意包。