前端-从零开始在本机部署一个前端项目
目录
一.安装nvm
🖥️ 在 Linux / macOS 上安装 nvm
1. 使用官方脚本安装（推荐）
2. 刷新终端配置
3. 检查是否安装成功
🪟 在 Windows 上安装 nvm
1. 下载 nvm-windows
2. 安装完成后，打开 PowerShell / CMD，检查版本：
🚀 使用 nvm 的好处
二.查看nvm的安装位置
🖥️ Linux / macOS
🪟 Windows (nvm-windows)
查看实际安装位置
🔑 总结
三.安装node
1. 查看此时电脑中的node已经存在的版本
2.安装node
3.使用node
4.查看node是否安装成功：
5.删除node
四.运行前端项目
切换为国内源：
1. 临时使用国内源
2. 永久切换为国内源
3. 使用 cnpm（淘宝团队维护的 npm CLI）
4. 切换回官方源
7.安装yarn
运行项目：
一.安装nvm
nvm是node的管理工具
🖥️ 在 Linux / macOS 上安装 nvm
1. 使用官方脚本安装（推荐）
在终端里执行：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
或者：
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash2. 刷新终端配置
安装完成后，执行：
source ~/.bashrc # 如果是 macOS，可能要执行： # source ~/.zshrc3. 检查是否安装成功
nvm --version能看到版本号说明成功。
🪟 在 Windows 上安装 nvm
Windows 上用的是 nvm-windows，不是官方的 bash 版本。
1. 下载 nvm-windows
前往 GitHub 下载最新版安装包：
👉 nvm-windows Releases
https://github.com/coreybutler/nvm-windows/releases
选择 nvm-setup.exe 并安装。
选择目标安装位置
切换node的安装位置
可以省略
安装好nvm后nvm会自动设置好系统的环境变量
2. 安装完成后，打开 PowerShell / CMD，检查版本：
nvm version未安装时：
成功安装好后：
nvm install 18.17.1 # 安装 Node.js v18.17.1 nvm use 18.17.1 # 切换到这个版本 nvm ls # 查看已安装的版本🚀 使用 nvm 的好处
-
可以在一台机器上安装多个版本的 Node.js。
-
可以方便地在不同版本之间切换（比如有的项目需要 Node 14，有的项目需要 Node 18）。
-
避免全局冲突。
二.查看nvm的安装位置
🖥️ Linux / macOS
nvm 本质上是通过 脚本 + 环境变量 来管理 Node.js。
-
查看 nvm 的根目录
echo $NVM_DIR默认一般是：
/home/你的用户名/.nvm或者 macOS 是：
/Users/你的用户名/.nvm -
查看配置文件
安装 nvm 的脚本会在~/.bashrc、~/.zshrc或~/.profile里写入类似：export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"这行代码就是 nvm 的位置。
-
Node.js 安装位置
用 nvm 装的 Node.js 版本会放在：$NVM_DIR/versions/node/例如：
~/.nvm/versions/node/v18.17.1/bin/node
🪟 Windows (nvm-windows)
Windows 上用的是 nvm-windows，安装位置通常是：
-
主程序：
C:\Program Files\nvm -
Node.js 版本目录：
C:\Users\<你的用户名>\AppData\Roaming\nvm
查看实际安装位置
-
在 CMD / PowerShell 中运行：
where nvm会显示 nvm.exe 的路径。
-
查看 Node.js 的安装路径：
where node输出类似：
C:\Program Files\nodejs\node.exe或者指向 nvm 管理的版本目录。
🔑 总结
-
Linux/macOS →
echo $NVM_DIR（默认在~/.nvm）。 -
Windows →
where nvm（默认在C:\Program Files\nvm）。
三.安装node
1. 查看此时电脑中的node已经存在的版本
nvm list
2.安装node
nvm install node版本号3.使用node
nvm use node版本号
4.查看node是否安装成功：
node --verison
5.删除node
nvm uninstall node版本号
四.运行前端项目
在前端项目中打开powershell
shift+右键选择powershell
安装运行前端项目所需要的依赖
npm install
如果不切换为国内源会报错：
切换为国内源：
1. 临时使用国内源
只针对单次安装使用国内源，不会改变全局配置：
npm install 包名 --registry=https://registry.npmmirror.com2. 永久切换为国内源
执行命令修改 npm 的配置：
npm config set registry https://registry.npmmirror.com验证是否生效：
npm config get registry如果返回的是：
https://registry.npmmirror.com/说明切换成功 ✅
3. 使用 cnpm（淘宝团队维护的 npm CLI）
你也可以安装一个专门的 cnpm 工具，它会默认使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npmmirror.com 之后用 cnpm install 来代替 npm install，下载速度会更快。
4. 切换回官方源
如果以后需要切换回 npm 官方源，可以运行：
npm config set registry https://registry.npmjs.org/✅ 总结
-
临时切换：
npm install 包名 --registry=... -
永久切换：
npm config set registry ... -
推荐源：
https://registry.npmmirror.com -
验证：
npm config get registry
7.安装yarn
如果npm切换为国内源还是报错不能安装项目依赖，可以安装yarn
npm install -g yarn然后使用
yarn install运行项目：
yarn 运行指令
