开发环境搭建

本文将详细介绍如何搭建uni-app开发环境，包括开发工具的安装和配置。

开发工具选择

💡 推荐使用HBuilderX作为开发工具

HBuilderX是DCloud推出的一款专为uni-app设计的IDE，提供了丰富的可视化操作和调试功能。

开发工具对比

开发工具	优势	劣势	适合人群
HBuilderX	内置uni-app支持，可视化操作，调试方便，运行快速	部分高级功能需要付费	所有开发者，尤其是初学者
VS Code + 插件	生态丰富，扩展性强，自定义程度高	需要额外配置，调试不如HBuilderX方便	有VS Code使用经验的开发者
命令行 + 编辑器	灵活性高，适合自动化流程	上手难度大，需要更多配置	有丰富开发经验的开发者

HBuilderX安装配置

下载安装

按照以下步骤安装HBuilderX：

1. 访问官网 - 打开 https://www.dcloud.io/hbuilderx.html
2. 选择版本 - 推荐下载App开发版，支持uni-app开发
3. 安装软件 - 下载后双击安装包进行安装

版本选择

版本类型	特点	适用场景	推荐度
标准版	轻量编辑器，适合Web开发	Web项目开发	⭐⭐⭐
App开发版 🌟	集成App开发环境，支持uni-app	uni-app项目开发	⭐⭐⭐⭐⭐

安装插件

HBuilderX通过插件扩展功能，uni-app开发需要安装以下插件：

必备插件

• ✅ uni-app编译 - uni-app必备插件
• ✅ App真机运行 - 用于App开发调试

推荐插件

• 🌐 内置浏览器 - 用于H5预览
• 🎨 scss/sass编译 - 用于样式开发
• 📝 eslint-js - 代码规范检查
• ✨ prettier - 代码格式化

配置开发环境

编辑器设置

1. 打开HBuilderX，点击菜单 工具 -> 设置
2. 可以设置编辑器的字体、主题、缩进等
3. 推荐开启"保存时自动格式化"选项

运行环境配置

1. 点击菜单 工具 -> 设置 -> 运行配置
2. 配置浏览器路径、模拟器路径等
3. 可以设置默认运行环境

Git配置

1. 点击菜单 工具 -> 设置 -> Git配置
2. 设置Git路径和用户信息
3. 可以启用Git集成功能

命令行工具安装

如果您喜欢使用命令行开发，可以按照以下步骤安装uni-app命令行工具：

安装Node.js

第一步：下载Node.js

访问 Node.js官网 下载长期支持版(LTS)

第二步：安装Node.js

双击安装包，按照提示完成安装

第三步：验证安装

打开命令行工具，输入以下命令检查是否安装成功：

node -v
npm -v

安装Vue CLI

# 全局安装Vue CLI
npm install -g @vue/cli

# 验证安装
vue --version

安装uni-app模板

# 创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project

# 选择模板类型
# 可选择默认模板（Vue2）或 Vue3/TypeScript 模板

开发环境要求

系统要求

项目	要求
操作系统	Windows 7及以上 / macOS 10.13及以上 / Linux
内存	建议8GB及以上
存储空间	至少10GB可用空间
Node.js版本	12.0.0及以上

模拟器安装

Android模拟器

Android Studio模拟器

1. 下载安装 Android Studio
2. 打开Android Studio，点击 Tools -> AVD Manager
3. 点击 Create Virtual Device，选择设备型号和系统版本
4. 创建完成后，可以在HBuilderX中选择该模拟器运行项目

iOS模拟器（仅macOS）

1. 下载安装 Xcode
2. 打开Xcode，点击 Xcode -> Preferences -> Components
3. 下载需要的iOS模拟器版本
4. 在HBuilderX中可以选择iOS模拟器运行项目

真机调试配置

Android真机调试

1. 开启USB调试 - 在手机设置中找到开发者选项，开启USB调试
2. 安装驱动 - 确保电脑已安装对应手机品牌的USB驱动
3. 连接设备 - 使用USB线连接手机和电脑
4. 运行项目 - 在HBuilderX中选择连接的设备运行项目

iOS真机调试

⚠️ 注意：iOS真机调试需要Apple开发者账号

iOS真机调试需要Apple开发者账号和证书配置，个人开发可以使用免费的开发者账号，但有一些限制。

1. 注册开发者账号 - 访问Apple开发者网站注册账号
2. 安装Xcode - 在Mac电脑上安装Xcode
3. 配置证书 - 在Xcode中配置开发证书和描述文件
4. 连接设备 - 使用USB线连接iPhone和Mac电脑
5. 运行项目 - 在HBuilderX中选择连接的设备运行项目

常见问题

HBuilderX无法启动

解决方案：

1. 检查是否有杀毒软件拦截
2. 尝试以管理员身份运行
3. 重新下载安装最新版本

插件安装失败

解决方案：

1. 检查网络连接
2. 尝试切换插件服务器
3. 关闭HBuilderX重新打开再安装

真机调试连接不上

解决方案：

1. 检查USB线是否正常
2. 确认手机已开启USB调试
3. 重新安装手机驱动
4. 尝试重启手机和电脑

下一步学习

完成开发环境搭建后，您可以继续学习：

学习内容	描述	链接
项目结构详解	深入了解uni-app项目的文件结构	查看详情
生命周期	学习uni-app应用和页面的生命周期	查看详情
基础组件	了解uni-app的基础组件使用方法	查看详情

---

相关链接：

• HBuilderX官网
• Node.js官网
• Android Studio
• Xcode