创建一个uni-app项目并运行

1. 下载HBuilderX、微信开发者工具

HBuilderX官方下载链接: HBuilderX
选择开发版，这样就不用再下载各种插件了

微信开发者工具官方下载链接:微信开发者工具
小程序选择稳定版

2. 创建uni-app项目

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型 -> 输入工程名 -> 选择模板 -> 创建：

3.运行项目

因为是一个使用 Vue.js 开发所有前端应用的框架，所以学过Vue.js 的可以很容易上手。
如下，更改一点 index.vue 的数据：

运行到微信开发者工具：

HBuilderX会自动打开微信开发者工具：

选择自己的项目 -> 打开：

HBuilderX控制台出现以下提示，则运行成功：

如果HBuilderX控制台出现报错：uniapp enable ide service (y/n)

报错原因：微信开发者工具没有开启端口供HBuilderX调试项目

解决方法：微信开发者工具 -> 设置 -> 安全设置 -> 开启服务端口

现在，uni-app已经在微信开发者工具上模拟出来了：

注意这里有报错：

如果微信开发者工具控制台出现报错：TypeError: Cannot read property ‘forceUpdate’ of undefined

报错原因：uni-app没有AppID

解决方法：

1. 登录HBuilderX账号后，可以获取一个用来测试的AppID
   
2. 登录微信小程序后，点击首页 -> 查看详情，滑到下面，就可以看见自己创建的小程序的AppID
   
   
   复制AppID，然后粘贴：
   
   
   
   现在，微信开发者工具控制台就不会报错：
   

4.真机调试

点击真机调试，会自动生成二维码
微信扫一扫就可以真机调试