uni-app 开发环境搭建
开发 uni-app 有两种主流方式，HBuilderX 可视化 IDE 和 命令行工具（CLI）。
- HBuilderX 是官方出品、开箱即用的 IDE，下载安装后直接新建项目就能跑，对新手最友好，官方推荐。
- CLI 方式用 npm 创建项目、用命令行启动，适合熟悉命令行的开发者，方便和现有工程、CI 流程集成。
本教程以 HBuilderX 方式为主（对应官方推荐路线），CLI 方式会给出常用命令速查。
方式一：HBuilderX 可视化 IDE
下载安装
打开 HBuilderX 官网下载页，选择「App 开发版」下载。App 开发版包含了 uni-app 开发所需的全部功能，Windows 版下载 zip 压缩包，解压后直接运行 HBuilderX.exe 即可，不需要安装，也不依赖 Node.js。
打开后如果是首次使用，建议在菜单栏「工具 → 插件安装」中安装官方推荐的插件，特别是 uni-app 编译器相关插件（新版一般已内置）。
创建第一个项目
点击工具栏的「新建 → 项目」，在弹出的窗口中：
- 选择项目类型为 uni-app
- 填写工程名称，例如
my-uni-app - 选择模板（详见下文模板说明）
- Vue 版本选择 Vue3（新版默认，推荐）
点击「创建」后，HBuilderX 会生成项目骨架并在左侧资源管理器中展示。
模板选择
| 模板 | 内容 | 适用场景 |
|---|---|---|
| 默认模板 | 干净的空白项目，只有最小的基础代码 | 从零开始自己写 |
| Hello uni-app | 官方示例，包含大量内置组件和 API 的演示代码 | 学习参考、查用法 |
| uni-ui 项目 | 自带 uni-ui 扩展组件库（如列表、日历等） | 需要现成组件库 |
新手建议选「默认模板」从零开始，遇到组件用法不确定时，对照「Hello uni-app」里的演示代码。
运行到各端
创建完成后，点击工具栏的「运行」按钮，可以看到多个目标：
运行到浏览器
选择「运行到浏览器 → Chrome」，HBuilderX 会启动内置服务器并打开网页，这是最快的预览方式。注意 H5 端的页面地址形如 http://localhost:8080。
运行到微信开发者工具
- 先去微信开发者工具官网下载安装。
- 打开微信开发者工具，在「设置 → 安全设置」中开启服务端口。
- 回到 HBuilderX，选择「运行到小程序模拟器 → 微信开发者工具」，即可自动打开预览。
运行到 App
- 真机调试，手机用数据线连接电脑并开启 USB 调试，选择「运行到手机或模拟器」。
- 模拟器运行，可在 HBuilderX 中安装内置的 Android 模拟器。
- 没有手机时也可以直接选择「云打包」或「本地打包」，在「发行 → 原生 App-云打包」中生成安装包。
提示：运行到真机时，需要在 manifest.json 的「App 模块配置」中勾选对应的原生模块，例如定位、推送，否则相关 API 调用会报错。
方式二：命令行（CLI）
适合已经熟悉 npm 的开发者，这里给出 Vue3 + Vite 版本的完整流程：
# 1. 拉取官方项目模板
npx degit dcloudio/uni-preset-vue#vite my-uni-app
# 2. 进入项目并安装依赖
cd my-uni-app
npm install
# 3. 运行到 H5
npm run dev:h5
# 4. 运行到微信小程序
npm run dev:mp-weixin
# 5. 运行到 App（HBuilderX 导入项目后使用）
npm run dev:app常用命令一览：
| 命令 | 作用 |
|---|---|
npm run dev:h5 |
开发调试 H5 端 |
npm run dev:mp-weixin |
开发调试微信小程序端 |
npm run build:h5 |
打包 H5 端生产代码 |
npm run build:mp-weixin |
打包微信小程序端生产代码 |
Node.js 版本要求
CLI 方式对 Node.js 有版本要求，Vue3/Vite 版需要 Node.js 18+ 或 20+（两个大版本中满足一个即可），版本过低会安装失败或运行报错。还没有 Node.js 的可以参考 Node.js 环境搭建。
提示：HBuilderX 方式不需要自己装 Node.js，编译器已内置；CLI 方式才需要。
总结
| 对比项 | HBuilderX | CLI |
|---|---|---|
| 适合人群 | 新手、不熟悉命令行 | 熟悉命令行、团队协作 |
| 依赖 Node.js | 不需要 | 需要 Node.js 18+ 或 20+ |
| 项目创建 | 可视化点选，一步完成 | npm 命令 |
| 运行到多端 | 按钮一键选择 | 不同的 npm run 命令 |
一句话总结：新手直接用 HBuilderX，下载解压、新建项目、点运行就能预览到各端效果；CLI 方式留给熟悉命令行的你，两条路最终写的是同一套代码。