经过 HBuilderX 可视化界面
可视化的方法比较简略，HBuilderX内置相关环境，开箱即用，无需配置nodejs
起头之前，开发者需要先下载装置如下工具：HBuilderX
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化
下载App开发版，但是开箱即用；如下载标准版，在运转或发行uni-app不时，会面提醒装置uni-app插件，插件下载完成后方但是应用
如利用cli方法创立项目，但是直接下载标准版，因为uni-app编译插件被装置到项目下了
创立uni-app
在点击工具栏里的文件 -> 新建 -> 项目：
抉择uni-app类型，输入工程名，抉择模板，点击创建，即可成功创立
uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例还有一个主要模板是 uni ui项目模板，日常开发推举应用该模板，已内置大量常用组件
运转uni-app
1.浏览器运转：进入hello-uniapp项目，点击工具栏的运行 -> 运转到浏览器 -> 取舍浏览器，即可在浏览器里面体验uni-app 的 H5 版
2.真机运转：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运转 -> 取舍运行的设备，即可在该设备里面体验uni-app
若是手机回天乏术辨认，恳求点击菜单运转-运行到手机或模拟器-真机运转常见故障排查指南 留神目前开发App也需要装置微信开发者工具。
3.在微信开发者工具里运转：进入hello-uniapp项目，点击工具栏的运行 -> 运转到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app
留神：如果是第一次利用，需要先配置小程序ide的相关门路，才干运转成功如下希图，需要在输入框输入微信开发者工具的安装途径 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的途径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果
uni-app默认把项目编译到根目次的unpackage目次
4.在支付宝小程序开发者工具里运转：进入hello-uniapp项目，点击工具栏的运行 -> 运转到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app
5.在百度开发者工具里运转：进入hello-uniapp项目，点击工具栏的运行 -> 运转到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app
6.在字节跳动开发者工具里运转：进入hello-uniapp项目，点击工具栏的运行 -> 运转到小程序模拟器 -> 字节跳动开发者工具，即可在字节跳动开发者工具里面体验uni-app
7.在QQ小程序开发工具里运转：内容同上，不再重复
Tips
- 如果是第一次利用，需要配置开发工具的相关途径。
