一、 HBuildX的介绍

HBuildX也是DCloud开发的一款编辑器，和uni-app是同一个公司开发的。可想而知，HBuildX对uni-appa支持程度极高，因此我们也就选用HbuildX作为uni-app开发的主编辑器。

二、安装HbuildX

• 官网下载：HBuilderX-高效极客技巧 选择APP开发版
• 解压后即可使用
• 安装插件：工具=>插件安装（uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译）

三、创建第一个uni-app

• 启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建

• 项目结构

  |-- components                uni-app组件目录
  |-- pages                    页面目录
  |-- static                    存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
  |-- main.js                 Vue入口文件
  |-- App.vue                    应用全局配置文件
  |-- manifest.json             配置应用名，打包版本，appid,logo等打包信息的配置文件
  |-- pages.json                 配置路由，导航条，选项卡等页面信息文件
  |-- index.html                 适配vue3
  |-- uni.scss                 uni-app内置的常用样式变量 

四、运行

1、运行到浏览器

• 运行到chrome浏览器：进入到uni-app=>运行=>运行到浏览器=>运行到chrome浏览器
• 运行到内置浏览器：安装“内置浏览器插件”=>运行=>运行到内置浏览器

2、运行到微信小程序

• 安装微信开发者工具，地址：稳定版 Stable Build | 微信开放文档
• 打开服务端口：启动微信开发者工具，点击设置图标=>安全=>打开服务端口
• 配置微信小程序路径：打开HbuildX，点击运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置
• 运行：打开HbuildX，进入项目，点击运行=>运行到小程序模拟器=>微信开发者工具=>微信小程序会自动打开并运行项目

3、运行到安卓手机

• 将手机通过数据线连接到计算机
• 将手机设置为USB调试模式，不同型号手机设置方式不同，大家可以去搜索一下
• 运行：打开HBuildX，进入项目，单击运行=>运行到手机或模拟器=>运行-设备:Android-*****
• 运行后，手机会安装HBuilder应用，安装完成后，就可以预览了。

4、运行到苹果手机

• Windows电脑连接苹果手机，要先安装iTunes，地址：Apple - Support - Downloads
• 将手机用数据线连接到电脑=>选择“信任“。
• 打开HBuildX，进入项目，单击运行=>手机运行=>选择iphone设备，等待编译完成，就可以预览了。