前端开发新机环境部署（带链接）

文章目录

• [1 前言](#1 前言)
• [2 环境部署](#2 环境部署)
• • [2.1 必装基础工具](#2.1 必装基础工具)
  • • [2.1.1 浏览器](#2.1.1 浏览器)
    • [2.1.2 版本控制工具 Git](#2.1.2 版本控制工具 Git)
    • [2.1.3 代码编辑器](#2.1.3 代码编辑器)
  • [2.2 核心前端开发环境](#2.2 核心前端开发环境)
  • • [2.2.1 Node.js 安装](#2.2.1 Node.js 安装)
    • • [2.2.1.1 nvm 安装](#2.2.1.1 nvm 安装)
      • [2.2.1.2 用 nvm 安装 Node.js](#2.2.1.2 用 nvm 安装 Node.js)
    • [2.2.2 包管理器配置](#2.2.2 包管理器配置)
    • [2.2.3 npm 源管理工具](#2.2.3 npm 源管理工具)
  • [2.3 可选专项工具](#2.3 可选专项工具)
  • [2.4 框架 / 工程化脚手架](#2.4 框架 / 工程化脚手架)
  • • [2.4.1 Vue 开发](#2.4.1 Vue 开发)
    • [2.4.2 React 开发](#2.4.2 React 开发)
  • [3 环境整体验证](#3 环境整体验证)

---

1 前言

工作电脑在半个月内坏了两次，故申请换新了，以此记录Windows新机环境部署。

2 环境部署

2.1 必装基础工具

2.1.1 浏览器

前端开发的调试、预览都靠浏览器，优先装 Chrome（无法下载Chrome情况下可使用Edge，两者都是 Chromium 内核，调试工具一致，Edge 对国内网站兼容性更好）：

• Chrome 下载：Google Chrome
• Edge 下载：Microsoft Edge

2.1.2 版本控制工具 Git

前端开发的代码管理、协作、提交仓库都靠 Git，官网下载：Git

2.1.3 代码编辑器

前端开发的主流编辑器是 VSCode（免费、轻量、插件生态无敌），官网下载：VSCode

• Chinese (Simplified) ：中文界面，新手必备
• Prettier - Code formatter：代码自动格式化
• ESLint：代码语法检查
• EditorConfig for VS Code：跨编辑器统一编码规范
• Auto Rename Tag：HTML/JSX 标签自动重命名
• Path Intellisense：路径自动补全
• GitLens --- Git supercharged：Git 增强，也可以使用Git History
• Tailwind CSS IntelliSense：Tailwind CSS 自动补全
• Vue - Official：Vue2/Vue3 全语法支持
• ES7+ React/Redux/React-Native snippets：轻量化 React 代码片段

2.2 核心前端开发环境

2.2.1 Node.js 安装

直接装 Node.js 会导致多个项目依赖不同 Node 版本时无法切换，前端主流方案是用 nvm（Node Version Manager）管理 Node 版本，支持一键安装 / 切换 / 删除 Node，Windows/macOS 都支持。

2.2.1.1 nvm 安装

官网下载：nvm-windows

2.2.1.2 用 nvm 安装 Node.js

# 安装最新LTS版Node.js
nvm install lts
# 查看已安装的Node版本
nvm ls
# 设置默认使用的Node版本（后续新开终端自动用这个版本）
nvm use lts
# 验证Node和自带的npm是否安装成功
node -v # 输出版本号即成功
npm -v  # 输出版本号即成功

2.2.2 包管理器配置

Node.js 自带 npm，但存在速度慢、磁盘占用高、依赖嵌套深的问题，前端主流用 pnpm（性能最优,解决下载慢的问题，国内必配）

npm install -g pnpm
# 验证是否成功
pnpm -v # 输出版本号即成功

2.2.3 npm 源管理工具

pnpm install -g nrm
# 验证是否成功
nrm ls # 查看所有可用镜像源
# 切换到淘宝/阿里云源（国内首选，速度最快）
nrm use taobao

2.3 可选专项工具

如果你的开发场景涉及小程序、移动端、构建工具，装下面的工具，适配专项开发：

• 小程序开发：微信开发者工具，支持小程序 / 小游戏调试、模拟器、真机预览，微信扫码即可登录。
• 移动端调试：Fiddler（抓包工具，调试移动端网络请求）、vConsole（移动端网页调试，无需装工具，引入脚本即可）。
• 构建 / 打包工具：无需单独装，Vite/Webpack/Rollup 都是通过包管理器（pnpm/npm）安装到项目中，框架（Vue/React）脚手架会自动集成。
• Docker（可选）：如果需要前端项目容器化部署，装 Docker Desktop（可视化界面，易操作）。
• Postman/Apifox（可选）：接口调试工具，前端联调后端接口时用，Apifox 是国产的，整合了Postman+Swagger+Mock，更适合国内开发者（Apifox 下载）。

2.4 框架 / 工程化脚手架

前端主流框架是 Vue3、React、Angular（Angular 国内用得少），官方都提供了脚手架，能一键创建标准化项目，集成了 Vite/Webpack、ESLint、Prettier 等，装完包管理器后直接用命令创建，无需单独装脚手架。

2.4.1 Vue 开发

# 创建Vue3项目（Vite 脚手架，速度最快）
pnpm create vite
# 按提示操作：输入项目名 → 选择框架（Vue）→ 选择语言（JavaScript/TypeScript）
# 进入项目 → 安装依赖 → 启动开发服务
cd 你的项目名
pnpm install
pnpm dev

2.4.2 React 开发

# 创建React项目（Vite 脚手架）
pnpm create vite
# 按提示操作：输入项目名 → 选择框架（React）→ 选择语言（JavaScript/TypeScript）
# 进入项目 → 安装依赖 → 启动开发服务
cd 你的项目名
pnpm install
pnpm dev

3 环境整体验证

按下面的步骤操作，能成功运行项目即说明环境搭建完成：

• 打开终端（Git Bash/Windows Terminal），执行 node -v/pnpm -v/git -v，都能输出版本号。
• 用 pnpm 创建一个 Vue3/React 项目（按上面的脚手架命令）。
• 进入项目执行 pnpm dev，终端输出本地服务地址（如 http://127.0.0.1:5173/）。
• 打开 Chrome/Edge，输入上述地址，能正常看到框架默认页面。
• 在 VS Code 中修改项目中的代码（如修改 App.vue/App.jsx 的文字），保存后浏览器自动热更新，说明 Prettier/ESLint/ 热更新都正常。