1、创建uni-app项目
可以使用可视化的工具(HBuilder X)或者使用Vue脚手架去搭建项目,HBuilder X配备了内置环境,开箱即用。
HBuilder X从v3.2.5开始优化了对Vue3的支持,Vue3中的setup语法糖也支持使用。HBuilderX-高效极客技巧 (dcloud.io)
![](https://img.haomeiwen.com/i25524960/d5b185ee142b728f.png)
2、运行uni-app项目在H5环境下
直接在HBuilder X通过运行至浏览器端,HBuilder X会自动的下载需要的一些插件。
3、运行uni-app项目在微信小程序环境下
HBuilder X可以注册一个Dcloud的开发者账号(有一些插件就需要拥有开发者账号才允许去下载使用)
HBuilder X支持在多端运行调试,需要注意的是,如果是要在小程序里面运行,微信开发者工具需要开启服务端口:小程序开发设置 -> 安全设置
![](https://img.haomeiwen.com/i25524960/8990cf74b18d7bdd.png)
![](https://img.haomeiwen.com/i25524960/a263a752b200ca7f.png)
然后放开服务端口,如果HBuilder X运行至小程序端,小程序未被自动调起,则还需要配置微信小程序的路径。
![](https://img.haomeiwen.com/i25524960/37739a465f917f96.png)
如果运行小程序还是未被调起,则可手动执行项目在微信小程序工具中跑
![](https://img.haomeiwen.com/i25524960/176a225be8203945.png)
![](https://img.haomeiwen.com/i25524960/9d16df41bbb7968f.png)
4、运行uni-app项目在真机/模拟器环境下
模拟器的话本人使用的是android studio下的模拟器(可以手动的配置模拟器),MAC系统推荐使用XCode。
![](https://img.haomeiwen.com/i25524960/a918a26479608cb0.png)
网友评论