2、环境搭建与工具链：Node.js安装、npm/yarn配置、微信开发者工具安装、HBuilderX安装与配置
说实话，跨端开发的第一步，往往不是写代码，而是把环境搭好。我见过太多新手卡在这一步，明明代码逻辑没问题，结果因为环境没配好，折腾一整天。今天咱们就把这些基础工具一次性搞定。
2.1 Node.js 安装
Node.js 是整个前端生态的基石。没有它，npm、yarn、Webpack 这些工具都跑不起来。我个人习惯用 LTS（长期支持）版本，稳定，坑少。
推荐版本：Node.js 16.x 或 18.x LTS
下载地址：https://nodejs.org/zh-cn/
安装过程很简单，一路 Next 就行。但有个细节要注意——安装路径不要带中文和空格。我在项目中遇到过有人把 Node 装到「Program Files (x86)」里，结果某些工具死活找不到路径，排查了半天。
装完之后，打开终端验证一下：
node -v
npm -v能看到版本号，说明安装成功。如果提示「不是内部或外部命令」，嗯，大概率是环境变量没配好。去系统变量里把 Node.js 的安装路径加到 Path 里就行。
小技巧：装完 Node 后，建议顺手把 npm 的镜像源换成淘宝的。国内下载依赖包的速度，你懂的。
npm config set registry https://registry.npmmirror.com2.2 npm / yarn 配置
npm 是 Node 自带的包管理器，yarn 是 Facebook 出的替代品。两者功能差不多，但 yarn 在依赖安装速度和锁定机制上更优。我个人偏好 yarn，不过团队项目里用 npm 也没问题。
安装 yarn 很简单：
npm install -g yarn装完之后，同样配置一下镜像源：
yarn config set registry https://registry.npmmirror.com为什么要配镜像？说白了，默认的 npm 源在国外，下载一个稍微大点的包，等半天是常事。我曾经在咖啡馆写代码，网络不好，一个 npm install 跑了十分钟还没完……后来果断换了淘宝源，世界清净了。
| 工具 | 配置命令 | 说明 |
|---|---|---|
| npm | npm config set registry https://registry.npmmirror.com |
全局生效 |
| yarn | yarn config set registry https://registry.npmmirror.com |
全局生效 |
注意：有些公司内部有私有 npm 仓库，这时候就别用淘宝源了。先问清楚团队用的是哪个源，避免冲突。
2.3 微信开发者工具安装
做小程序开发，微信开发者工具是绕不开的。它集成了代码编辑、调试、预览、上传等功能，说白了就是小程序的「IDE」。
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装时注意几点：
- 选择稳定版——别追新，稳定版 bug 少
- 安装路径同样不要有中文
- 登录时用你的微信扫码——没有小程序账号？去 mp.weixin.qq.com 注册一个
我第一次用这个工具时，有个坑印象很深：项目创建后，默认会生成一堆模板代码。很多新手直接在上面改，结果改着改着发现样式不对。其实你想想看，模板代码只是参考，真正开发时建议从零开始建项目，或者用脚手架工具生成。
避坑指南：我曾经在微信开发者工具里直接修改了 app.json 的 pages 字段，结果页面死活不显示。后来发现是路径写错了，少了个斜杠。这种小错误，排查起来特别费时间。
2.4 HBuilderX 安装与配置
HBuilderX 是 DCloud 推出的 IDE，专门用来开发 uni-app 项目。如果你要做多端统一开发（一套代码跑微信、支付宝、H5、App），那 HBuilderX 几乎是标配。
下载地址：https://www.dcloud.io/hbuilderx.html
安装过程同样简单，解压即用。但有几个配置点需要注意：
- 插件安装：打开 HBuilderX 后，建议先装 uni-app 插件和 Sass/Less 编译插件
- 模拟器配置：如果你要做 App 端调试，需要配置 Android 模拟器或 iOS 模拟器
- 快捷键习惯：HBuilderX 默认快捷键和 VS Code 不太一样，可以在「工具 - 快捷键方案」里切换成 VS Code 风格
我个人习惯把 HBuilderX 的字体调大一点，默认的 12px 看着太累。在「设置 - 编辑器设置」里改一下字体大小，舒服多了。
核心配置清单：
- Node.js 路径：确保 HBuilderX 能识别到你安装的 Node.js
- Git 路径：如果要用版本控制，配好 Git 的可执行文件路径
- 微信开发者工具路径：uni-app 项目运行到微信小程序时，需要关联这个路径
说到关联微信开发者工具，这里有个常见问题：HBuilderX 提示「未配置微信开发者工具路径」。解决办法很简单——在 HBuilderX 的「运行 - 运行到小程序模拟器 - 微信开发者工具路径」里，找到你安装微信开发者工具的 exe 文件就行。
注意：HBuilderX 和微信开发者工具的版本要匹配。我遇到过 HBuilderX 升级后，旧版微信开发者工具无法正常调试的情况。建议两者都保持最新稳定版。
2.5 环境验证
工具都装好了，怎么确认环境没问题？我一般会跑一个简单的 uni-app 项目试试：
# 创建一个 uni-app 项目
npx degit dcloudio/uni-preset-vue#vite my-project
# 进入项目目录
cd my-project
# 安装依赖
npm install
# 运行到微信小程序
npm run dev:mp-weixin如果能在微信开发者工具里看到页面正常渲染，说明环境搭建成功了。如果报错，别慌——先看错误信息，大部分问题都是路径没配好或者版本不兼容。
嗯，环境搭建这部分就到这里。工具链配好了，后面写代码才能顺风顺水。下一章咱们开始真正写代码，从第一个页面做起。