前端项目标准环境搭建与启动

🚀 前端项目标准环境搭建与启动

采用 nvm -> node/npm -> pnpm 链路，适用于绝大多数现代前端项目。

一、 环境管理工具 (nvm-windows)

使用 nvm 可以让你在不同项目间无缝切换 Node.js 版本。

1. 安装 nvm ：从 GitHub 下载 nvm-setup.exe 并安装。

2. 安装 Node.js ：

   nvm install 22.22.2  # 安装 LTS 稳定版

3. 切换版本 （需管理员权限）：

   nvm use 22.22.2

---

二、 包管理器配置 (pnpm)

pnpm 具有安装速度快、节省磁盘空间、防止幽灵依赖等优点，是目前中大型项目的首选。

1. 全局安装 pnpm ：

   npm install -g pnpm

2. 配置国内镜像源 （解决下载慢的问题）：

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

---

三、 项目清理与初始化

在重新安装依赖前，建议清理旧的残留文件以防报错。

1. 进入项目根目录 （必须包含 package.json 的文件夹）。

2. 彻底删除旧文件 ：

   • 手动删除 node_modules 文件夹。
   • 手动删除 package-lock.json 或 yarn.lock。

3. 执行安装 ：

   pnpm install

---

四、 项目运行

安装完成后，通过 package.json 中定义的脚本启动项目。

1. 开发环境运行 ：

   pnpm dev

2. 构建打包 （部署到生产环境时用）：

   pnpm build

---

🛠️ 常见问题排查 (Checklist)

现象	原因	对策
找不到 package.json	命令行执行路径不对	cd 进入前端 UI 源码文件夹
nvm use 报错拒绝访问	权限不足	使用 管理员身份 打开 PowerShell/CMD
pnpm 命令无效	环境变量未同步	重启编辑器或运行 pnpm setup
安装依赖卡死/报错	网络问题或缓存冲突	检查镜像源配置，尝试删除 node_modules 重装