HBuildX安装和uniapp的示例

HBuildX安装

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

1、下载地址：

https://www.dcloud.io/hbuilderx.html

选择安装正式版，Windows，APP版。

标准版可直接用于web开发、markdown、字处理等，做App仍需要安装插件。App开发版提前打包了App/uni-app开发所需的插件，可以直接使用。

如果使用uni-app cli方式创建项目，你不开发App，只用uni-app做小程序和H5，那使用标准版就可以。

2、解压安装

解压安装包HBuilderX.3.1.13.20210514.full.zip到短路径（如E盘根目录，路径过长会造成解压失败）下，即完成安装。

打开解压目录HBuilderX下，双击HBuilderX.exe即可启动。

第一个uniapp程序

1、打开HBuilderX，选择“新建项目”。

2、进入新建项目页面，

（1）输入工程名称，如helloUniapp，

（2）选择项目类型为“uni-app(U)"

（3）模板使用“Hello uni-app”

3、点击”创建“，下载模板完成创建。

4、编译运行，选择项目，点击菜单”运行“-》运行到浏览器-》选择浏览器，即可体验H5的hello示例。

等待编译完成，在下方控制台中看到编辑成功后，会自动打开浏览器显示结果。控制台输出示例：

16:09:18.390 INFO Starting development server...

16:10:35.869 App running at:

16:10:35.870 - Local: http://localhost:8080/

16:10:35.917 - Network: http://192.168.199.232:8080/

16:10:35.919 项目 'helloUniapp' 编译成功。前端运行日志，请另行在浏览器的控制台查看。

16:10:36.019 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232