HBuilderX 安装全教程
HBuilderX 是 DCloud（数字天堂）推出的一款功能强大的免费代码编辑器，尤其擅长开发前端（Web、小程序、App）和混合应用（uni-app），它集成了代码提示、语法高亮、项目管理、真机调试、发布等众多功能,非常方便。
第一步：下载 HBuilderX
你需要从官方网站下载 HBuilderX 的安装包。
-
访问官网：
- 打开浏览器，访问 DCloud 官网：https://www.dcloud.io/hbuilderx.html
-
选择版本：
-
在下载页面，你会看到两个主要版本,请根据你的需求选择：
- 标准版：
- 特点：体积小，启动速度快,只包含核心功能。
- 推荐人群：主要进行 Web 前端、uni-app 等项目开发的用户,或者你的电脑配置较低。
- App 开发版：
- 特点：在标准版的基础上，内置了 Android 和 iOS 的真机运行环境，这意味着你可以直接在 HBuilderX 里编译和运行 App 到手机或模拟器，无需手动配置复杂的 SDK。
- 推荐人群：强烈推荐初学者选择此版本！ 如果你计划开发手机 App（特别是使用 uni-app 框架）,这个版本能为你节省大量配置时间。
- 标准版：
-
操作系统选择：
- 根据你的电脑系统选择对应的版本，如 Windows、macOS 或 Linux。
-
-
下载安装包：
- 点击你选择的版本（如“App 开发版”或“标准版”）对应的“下载”按钮。
- 下载完成后，你会得到一个压缩包（
HBuilderX.7z或HBuilderX.app）。HBuilderX 无需安装，解压即可使用。
第二步：安装 HBuilderX
HBuilderX 的“安装”过程实际上就是解压和放置文件。
Windows 系统安装
- 找到下载的文件：通常在你的“下载”文件夹中，文件名为
HBuilderX.7z。 - 解压文件：
- 如果你有 7-Zip 或 WinRAR 等解压软件：
- 右键点击
HBuilderX.7z文件，选择“解压到 HBuilderX\”。
- 右键点击
- 如果你没有解压软件：
- Windows 10/11 系统可以直接右键点击，选择“全部提取”，然后选择一个目标路径（建议解压到
C:\盘或D:\盘根目录，路径中不要有中文或空格，C:\HBuilderX）。
- Windows 10/11 系统可以直接右键点击，选择“全部提取”，然后选择一个目标路径（建议解压到
- 如果你有 7-Zip 或 WinRAR 等解压软件：
- 完成：解压后，进入
HBuilderX文件夹，找到HBuilderX.exe文件，这就是 HBuilderX 的主程序。
macOS 系统安装
- 找到下载的文件：通常在你的“下载”文件夹中，文件名为
HBuilderX_XXXX.dmg。 - 挂载磁盘映像：
- 双击
.dmg文件，系统会弹出一个新的窗口，里面是 HBuilderX 的图标。
- 双击
- 拖拽到“应用程序”：
- 将 HBuilderX 的图标直接拖拽到你的“应用程序”文件夹中。
- 完成：拖拽成功后，HBuilderX 就已经“安装”好了，你可以在“启动台”或“应用程序”文件夹中找到它并双击打开。
Linux 系统安装
- 找到下载的文件：通常在你的“下载”文件夹中，文件名为
HBuilderX_XXXX.7z。 - 解压文件：
- 打开终端，使用
cd命令进入你的“下载”文件夹。 - 使用
7z命令进行解压：7z x HBuilderX_XXXX.7z -o~/HBuilderX
x表示解压。-o~/HBuilderX表示解压到用户主目录下的HBuilderX文件夹（ 代表你的用户目录）。
- 打开终端，使用
- 运行：
- 进入解压后的文件夹：
cd ~/HBuilderX
- 给
HBuilderX文件添加可执行权限：chmod +x HBuilderX
- 运行 HBuilderX：
./HBuilderX
- 为了方便,你可以创建一个桌面快捷方式。
- 进入解压后的文件夹：
第三步：首次启动与基本配置
-
启动 HBuilderX：
- Windows: 双击
HBuilderX.exe。 - macOS: 在“应用程序”文件夹中双击 HBuilderX。
- Linux: 在终端中运行
./HBuilderX。
- Windows: 双击
-
选择工作空间：
- 第一次启动时，HBuilderX 会提示你选择一个“工作空间”（Workspace）。
- 工作空间是存放你所有项目的地方，请选择一个你方便管理、路径中没有中文和空格的文件夹，
D:\WorkSpace或~/Documents/HBuilderX-Projects。 - 选择后，HBuilderX 会将配置文件存放在该目录下的
.HBuilderX文件夹中。之后启动会自动打开这个工作空间。
-
安装插件（非常重要）：
- HBuilderX 的强大之处在于其丰富的插件生态,你需要根据你的开发目标安装相应的插件。
- 打开 HBuilderX，点击顶部菜单栏的
帮助->插件安装。 - 在弹出的插件市场中，搜索并安装以下常用插件：
uni-app: 如果你开发跨平台应用（小程序、App、H5），必须安装。Prettier - 代码格式化: 用于一键美化你的代码,保持代码风格统一。Vetur: 如果你使用 Vue.js 框架,这个插件能提供强大的语法提示和功能支持。Emmet: 快速编写 HTML 和 CSS 的神器,通常已内置。Live Server: 在本地启动一个服务器,方便预览网页项目。
- 安装方法：在插件市场找到插件，点击右侧的“安装”按钮即可。
第四步：创建你的第一个项目
安装配置完成后,就可以开始创建项目了。
-
新建项目：
- 点击顶部菜单栏的
文件->新建->项目...。
- 点击顶部菜单栏的
-
选择模板：
- 在弹出的新建项目窗口中,左侧选择你想要创建的项目类型。
- 示例：创建一个 uni-app 项目
- 在左侧选择
uni-app。 - 在右侧选择一个模板，如
Hello uni-app（官方示例模板，非常适合新手学习）。 - 输入项目名称（
my-first-app），并选择项目存放的路径（最好在你的工作空间内）。 - 点击
创建。
- 在左侧选择
-
运行项目：
- 项目创建成功后，HBuilderX 会自动打开项目文件。
- 在右侧的“运行”标签页中，你可以选择多种方式来运行你的项目：
- 运行到浏览器: 点击“运行到内置浏览器”或“运行到默认浏览器”,可以快速在电脑浏览器中看到效果。
- 运行到小程序模拟器: 如果你安装了微信开发者工具等,可以配置后运行到对应的模拟器。
- 运行到手机或模拟器 (仅 App 开发版): 这是最强大的功能，点击“运行到手机或模拟器”，HBuilderX 会自动编译项目并安装到你的安卓手机或模拟器上。
常见问题与解决方案
Q1: HBuilderX 提示“无法定位程序输入点”怎么办？ A: 这通常是因为你安装了多个版本的 HBuilderX，或者旧版本没有完全卸干净，请确保只保留一个解压后的 HBuilderX 文件夹,并将其放在一个干净的路径下。
Q2: 为什么我找不到 uni-app 模板？
A: 因为你没有安装 uni-app 插件，请按照第三步的说明，进入 帮助 -> 插件安装，搜索并安装 uni-app 插件，然后重启 HBuilderX 即可。
Q3: 如何卸载 HBuilderX？
A: HBuilderX 是绿色软件，卸载非常简单。直接删除整个 HBuilderX 文件夹即可，如果你还想清理配置，可以删除你当初选择的工作空间目录下的 .HBuilderX 文件夹。
Q4: 如何更新 HBuilderX？
A: HBuilderX 会自动检查更新，当有新版本时，右下角会弹出提示，你也可以手动点击顶部菜单栏的 帮助 -> 检查更新，下载并解压新版本覆盖旧版本即可（建议备份好配置文件）。
Q5: 如何配置自己的代码提示或代码片段？
A: HBuilderX 支持自定义代码片段，点击顶部菜单栏的 工具 -> 代码块设置，在这里你可以添加、修改或删除自己的代码片段,提高编码效率。
