1、創(chuàng)建uni-app項(xiàng)目

可以使用可視化的工具(HBuilder X)或者使用Vue腳手架去搭建項(xiàng)目，HBuilder X配備了內(nèi)置環(huán)境，開箱即用。

HBuilder X從v3.2.5開始優(yōu)化了對(duì)Vue3的支持，Vue3中的setup語法糖也支持使用。HBuilderX-高效極客技巧 (dcloud.io)

圖1

2、運(yùn)行uni-app項(xiàng)目在H5環(huán)境下

直接在HBuilder X通過運(yùn)行至瀏覽器端，HBuilder X會(huì)自動(dòng)的下載需要的一些插件。

3、運(yùn)行uni-app項(xiàng)目在微信小程序環(huán)境下

HBuilder X可以注冊(cè)一個(gè)Dcloud的開發(fā)者賬號(hào)(有一些插件就需要擁有開發(fā)者賬號(hào)才允許去下載使用)
HBuilder X支持在多端運(yùn)行調(diào)試，需要注意的是，如果是要在小程序里面運(yùn)行，微信開發(fā)者工具需要開啟服務(wù)端口：小程序開發(fā)設(shè)置 -> 安全設(shè)置

圖2

image.png

然后放開服務(wù)端口，如果HBuilder X運(yùn)行至小程序端，小程序未被自動(dòng)調(diào)起，則還需要配置微信小程序的路徑。

圖3.png

如果運(yùn)行小程序還是未被調(diào)起，則可手動(dòng)執(zhí)行項(xiàng)目在微信小程序工具中跑

圖4

圖5

4、運(yùn)行uni-app項(xiàng)目在真機(jī)/模擬器環(huán)境下

模擬器的話本人使用的是android studio下的模擬器(可以手動(dòng)的配置模擬器)，MAC系統(tǒng)推薦使用XCode。

圖6