UniApp 小白入门实战专栏①：从安装 HBuilderX 开始，3 步跑通第一个项目
大家好呀！我是你们的 UniApp 入门向导～最近很多小伙伴私信说想入门跨端开发，但不知道从哪儿下手。别慌！从今天开始，这个专栏会带大家从 0 到 1 吃透 UniApp，不管你是纯小白还是想转跨端的开发者，跟着走就能落地实战项目～
今天咱们先搞定第一步：安装开发工具 HBuilderX，再新建第一个项目，最后教大家在浏览器、手机、微信小程序里运行，全程保姆级步骤，跟着做就对了！
一、先搞懂：为什么选 HBuilderX？
在开始安装前，先跟小白们说下：UniApp 官方推荐的开发工具是HBuilderX，它不仅对 UniApp 有原生支持，还自带语法提示、一键运行多端等功能，不用额外装一堆插件，对新手超友好～比用 VSCode 配置环境省太多事，咱们直接冲官方工具就好！
二、第一步：下载并安装 HBuilderX
1. 去官网下载对应版本
打开 HBuilderX 官方下载页：
这里要注意两个点，小白别选错：
- 版本选择：官网有「标准版」和「App 开发版」，咱们做 UniApp 开发，选「App 开发版」（里面包含了 UniApp 所需的所有插件，不用后续再装）；
- 系统选择：根据自己的电脑系统选 Windows 或 Mac 版，比如 Windows 电脑就点「Windows 版 (App 开发版)」下载。
下载完成后，Windows 用户双击安装包，跟着引导下一步就行（建议安装路径别选 C 盘，比如 D 盘新建个「HBuilderX」文件夹）；Mac 用户直接把压缩包解压到应用程序文件夹即可。
2. 启动 HBuilderX，简单配置（可选）
第一次打开 HBuilderX，会让你选编辑器主题（深色 / 浅色），新手选深色模式护眼～之后可以先把字体调大一点：顶部菜单栏「工具」→「设置」→「编辑器配置」→「字体大小」，改成 14-16 号字，看着更舒服。
三、第二步：新建第一个 UniApp 项目（Vue3 版）
安装好工具，咱们马上建个项目练手！小白建议从「空白项目」开始，别一上来就用复杂模板。
1. 打开新建项目入口
点击顶部菜单栏的「文件」→「新建」→「项目」（快捷键：Ctrl+N，Mac 是 Cmd+N），会弹出项目配置窗口。
2. 配置项目信息（关键！别填错）
在弹出的窗口里，按以下要求填：
- 项目名称：随便起，比如「my-first-uniapp」（别用中文，避免后续出问题）；
- 项目类型：选「UniApp 项目」；
- 模板选择：选「空白模板」（新手先练基础，复杂模板后面再学）；
- Vue 版本：选「Vue3」（现在 UniApp 主推 Vue3，生态更完善）；
- 勾选选项：可以勾选「创建 git 仓库」（方便后续管理代码，小白也可以先不勾，后面学 git 再补）；
- 项目路径：选一个自己能找到的文件夹，比如 D 盘「UniAppProjects」文件夹里。
填完后点击「创建」，等待 1-2 秒，项目就建好了！
3. 认识项目结构（小白必看）
项目创建后，左边会显示项目文件列表，简单跟大家说下核心文件：
- pages：放页面的文件夹，比如首页、列表页都在这里；
- App.vue：项目的根组件，相当于整个 App 的入口；
- pages.json：页面路由配置，比如新增页面要在这里注册；
- manifest.json：项目配置，比如 App 名称、图标、支持的端（微信小程序、App 等）都在这里改。
四、第三步：运行项目！3 种常见运行方式
项目建好后，咱们跑起来看看效果～UniApp 支持多端运行，今天先教大家最常用的 3 种：浏览器、手机、微信小程序。
1. 最简单：浏览器运行（新手优先用）
如果只是想快速看效果，浏览器运行最方便，不用装其他工具：
- 确保左边选中你的项目（比如点击「my-first-uniapp」）；
- 点击顶部菜单栏「运行」→「运行到浏览器」→ 选择你电脑上的浏览器（Chrome、Edge 都可以）；
- 等待几秒，浏览器会自动打开一个页面，显示「Hello UniApp」，说明运行成功啦！
小贴士：浏览器运行时，改代码后会自动刷新页面，不用手动重启，方便调试～
2. 最真实：运行到手机或模拟器
如果想看看 App 在手机上的实际效果，就用这种方式。需要准备：
- 一部安卓手机（苹果手机需要额外配置，后面章节再讲）；
- 一根 USB 数据线（别用充电线，要用能传数据的）。
步骤如下：
- 手机开启「开发者模式」和「USB 调试」（不同手机开启方式不同，比如小米：设置→我的设备→全部参数→连续点击「MIUI 版本」5 次，会提示开启开发者模式；然后回到设置→更多设置→开发者选项→打开「USB 调试」和「USB 安装」）；
- 用 USB 线连接手机和电脑，手机上会弹出「是否允许 USB 调试」，点击「允许」；
- 在 HBuilderX 中，选中项目→点击「运行」→「运行 App 到手机或模拟器」；
- 等待几秒，手机上会自动安装一个「HBuilderX 基座」App，打开后就能看到你的项目效果啦！
常见问题：如果手机连不上，先检查这 3 点：
- 数据线是否能传数据（换一根线试试）；
- 手机是否允许了 USB 调试（重新拔插线，会再次弹出提示）；
- 电脑是否装了手机驱动（可以用手机助手自动装驱动）；
3. 做小程序必备：运行到微信开发者工具
如果想开发微信小程序，需要先装「微信开发者工具」，再配置 HBuilderX。
第一步：安装微信开发者工具
- 按默认步骤安装，记住安装路径（后面要填到 HBuilderX 里）。
第二步：配置微信开发者工具
- 打开微信开发者工具，登录你的微信账号；
- 开启「服务端口」：点击顶部菜单栏「设置」→「安全设置」→ 打开「服务端口」（必须开，不然 HBuilderX 连不上）。
第三步：在 HBuilderX 中配置路径
- 打开 HBuilderX→点击「运行」→「运行到小程序模拟器」→「运行设置」；
- 在「微信开发者工具路径」中，选择你刚才安装微信开发者工具的路径（比如 Windows 默认是C:\Program Files (x86)\Tencent\微信web开发者工具\wechatdevtools.exe）；
- 点击「确定」保存。
第四步：运行项目
- 选中项目→点击「运行」→「运行到小程序模拟器」→「微信开发者工具」；
- 等待几秒，微信开发者工具会自动打开，显示你的 UniApp 项目，说明运行成功！
五、本章小结 & 下章预告
今天咱们完成了 UniApp 开发的第一步：
- 下载安装了 HBuilderX（记住选 App 开发版）；
- 新建了第一个 Vue3 版的空白项目；
- 学会了在浏览器、手机、微信小程序中运行项目。
如果这三步都走通了，恭喜你！已经迈过了 UniApp 的入门门槛～
下一章预告：咱们会讲解 Uniapp语法