UniApp 是一个基于 Vue.js 的跨平台开发框架，支持快速构建小程序、H5、App 等应用。作为开发的第一步，正确安装和配置 HBuilderX（官方推荐的 IDE）是至关重要的。下面我将以清晰步骤引导您完成整个过程，确保环境可用。整个过程基于 Windows 系统（其他系统类似），请确保网络连接稳定。
步骤 1：下载 HBuilderX
- 访问官网：打开浏览器，进入 HBuilderX 官方网站：https://www.dcloud.io/hbuilderx.html。
- 选择版本：根据您的操作系统（Windows、Mac 或 Linux）下载对应安装包。推荐下载标准版（包含基础功能）。
- 下载完成 ：保存到本地文件夹，如
C:\Downloads。
步骤 2：安装 HBuilderX
- Windows 系统 ：
- 解压下载的 ZIP 文件（例如
HBuilderX.zip）到指定目录，如C:\HBuilderX。 - 双击
HBuilderX.exe启动 IDE（首次运行可能需管理员权限）。
- 解压下载的 ZIP 文件（例如
- Mac/Linux 系统 ：
- 解压 DMG/TAR 文件，拖拽应用图标到应用程序文件夹。
- 启动 HBuilderX，同意用户协议。
- 验证安装：打开 HBuilderX 后，界面应显示欢迎页。如果报错（如缺少依赖），请重启电脑或检查防火墙设置。
步骤 3：安装 Node.js（环境依赖）
UniApp 依赖 Node.js 运行脚本和包管理，需先安装：
-
下载 Node.js ：
- 访问 Node.js 官网：https://nodejs.org/。
- 下载 LTS 版本（如 v18.x），运行安装程序。
-
安装过程 ：
-
勾选 "Add to PATH" 选项，确保全局可用。
-
完成安装后，打开命令提示符（CMD）或终端，输入以下命令验证：
node -v # 应输出版本号，如 v18.17.1 npm -v # 应输出 npm 版本，如 9.6.7
-
-
常见问题：如果命令无效，检查环境变量（Path 中添加 Node.js 安装路径）。
步骤 4：配置 HBuilderX 环境
- 启动 HBuilderX：确保 IDE 已打开。
- 设置 Node.js 路径 ：
- 点击顶部菜单：工具 > 设置 > 运行配置。
- 在 "Node 路径" 栏，输入 Node.js 可执行文件路径（如
C:\Program Files\nodejs\node.exe）。 - 保存设置。
- 安装 UniApp 插件 ：
- 点击菜单：工具 > 插件安装。
- 搜索 "uni-app"，选择官方插件并安装。
- 重启 HBuilderX 生效。
- 检查配置：点击菜单：运行 > 运行到浏览器，如果无错误提示，表示环境就绪。
步骤 5：创建并运行测试项目
- 新建 UniApp 项目 ：
- 点击菜单：文件 > 新建 > 项目。
- 选择 "uni-app" 模板，输入项目名称（如
myFirstApp），选择保存路径。 - 点击创建。
- 运行项目 ：
- 在项目管理器中，右键项目名，选择 "运行" > "运行到浏览器"。
- HBuilderX 将自动编译，并在默认浏览器打开预览页面（显示 "Hello UniApp"）。
- 验证成功：如果浏览器显示 UniApp 欢迎界面，表示安装和配置成功。
常见问题与解决
- HBuilderX 启动失败：可能是解压不完整，重新下载安装包；或关闭杀毒软件。
- Node.js 命令无效：检查环境变量（Path 是否包含 Node.js 路径），或重新安装 Node.js。
- 运行报错（如依赖缺失） ：在项目目录运行
npm install安装依赖。 - 跨平台问题 ：Mac/Linux 用户需使用
sudo权限安装 Node.js。