2、环境准备：Node.js与npm安装、Git版本控制配置、代码编辑器（VS Code）推荐设置
说实话，很多新手在界面移植这条路上栽跟头，不是因为技术多难，而是环境没搭好。我见过太多人花一整天装环境，结果卡在某个版本冲突上，心态直接崩了。
这一章，咱们就把地基打牢。你跟着我的步骤走，半小时内搞定所有工具。
2.1 Node.js 与 npm：你的 JavaScript 运行时
界面移植离不开前端构建工具，而这些工具几乎都跑在 Node.js 上。npm 是它的包管理器，用来下载各种依赖库。
2.1.1 安装 Node.js
我个人习惯用 LTS（长期支持）版本，稳定，坑少。别追新，除非你想当小白鼠。
- 打开 Node.js 官网（
nodejs.org），下载 LTS 版本。 - 双击安装包，一路 Next。注意勾选「Automatically install the necessary tools」。
- 安装完成后，打开终端（CMD 或 PowerShell），验证一下：
node -v
npm -v如果能看到版本号，比如 v18.17.0 和 9.6.7，说明装好了。
npm config set registry https://registry.npmmirror.com。速度能快好几倍。
2.1.2 理解 npm 的核心概念
你想想看，npm 就像一个应用商店。你要用某个库（比如 React），就在项目里执行 npm install react，它会自动下载到 node_modules 文件夹，并记录到 package.json 里。
| 概念 | 说明 | 常用命令 |
|---|---|---|
| package.json | 项目的清单文件，记录依赖、脚本、版本等信息 | npm init -y 快速生成 |
| node_modules | 依赖包的实际存放目录，一般不上传到 Git | 用 .gitignore 忽略它 |
| 全局安装 vs 本地安装 | 全局装一次，所有项目都能用；本地装只对当前项目生效 | npm install -g 全局，npm install 本地 |
create-react-app，导致新项目一直报错。后来才明白，全局工具尽量用 npx 来执行，它能自动使用最新版本。
2.2 Git 版本控制配置：你的后悔药
做界面移植，改代码是家常便饭。没有 Git，你改错了就只能靠记忆力往回找。有了 Git，随时可以回滚，心里踏实。
2.2.1 安装 Git
去 Git 官网（git-scm.com）下载对应系统的安装包。Windows 用户注意，安装时选「Use Git from the command line and also from 3rd-party software」。
装完后，打开终端验证：
git --version2.2.2 基础配置
装好之后，先告诉 Git 你是谁。不然提交代码时会报错。
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"我个人习惯再加两个配置：
git config --global core.autocrlf true # 解决 Windows 和 Mac 换行符不一致的问题
git config --global init.defaultBranch main # 默认分支名改成 main^M 符号。就是因为换行符没处理好。加上 core.autocrlf true 就解决了。
2.2.3 理解 Git 工作流
说白了，Git 就三个区：工作区（你写代码的地方）、暂存区（准备提交的改动）、本地仓库（已经保存的历史）。
2.3 VS Code 推荐设置：让你的编辑器更好用
编辑器这东西，用顺了能提升不少效率。VS Code 免费、轻量、插件多，做界面移植再合适不过。
2.3.1 安装 VS Code
去 VS Code 官网（code.visualstudio.com）下载安装。装完后，打开终端输入 code .，就能用 VS Code 打开当前文件夹。
2.3.2 必装插件
我列几个做界面移植时几乎天天用的插件：
| 插件名 | 作用 | 为什么需要 |
|---|---|---|
| ESLint | 代码规范检查 | 帮你发现潜在错误，统一代码风格 |
| Prettier | 代码格式化 | 保存文件时自动排版，省心 |
| GitLens | Git 增强工具 | 能看到每行代码是谁写的、什么时候写的 |
| Path Intellisense | 路径自动补全 | 引入文件时不用手敲路径 |
| Live Server | 本地开发服务器 | 修改代码后浏览器自动刷新 |
2.3.3 个人推荐设置
打开 VS Code 设置（Ctrl + ,），搜索下面几个选项，改一下：
// 保存时自动格式化
"editor.formatOnSave": true
// 默认格式化工具选 Prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
// 显示行号
"editor.lineNumbers": "on"
// 字体大小，我个人喜欢 16px
"editor.fontSize": 16
// 自动换行
"editor.wordWrap": "on"Fira Code，支持连字，看着舒服。你可以在设置里搜 terminal.integrated.fontFamily 修改。
2.4 验证环境：跑一个简单的例子
工具都装好了，咱们跑个小项目验证一下。打开终端，执行：
mkdir my-first-project
cd my-first-project
npm init -y
echo "console.log('环境准备完成！')" > index.js
node index.js如果终端输出 环境准备完成！，说明 Node.js 和 npm 都没问题。
接着初始化 Git：
git init
git add .
git commit -m "初始化项目"再用 VS Code 打开这个文件夹：
code .嗯，到这里，你的开发环境就全部就绪了。后面咱们就可以正式开始界面移植的实战了。