uni-app支持通過(guò) HbuilderX可視化界面、vue-cli命令行兩種方式快速創(chuàng)建項(xiàng)目。

通過(guò) HBuilderX 可視化界面

可視化的方式比較簡(jiǎn)單，HBuilderX內(nèi)置相關(guān)環(huán)境，開(kāi)箱即用，無(wú)需配置nodejs。

開(kāi)始之前，開(kāi)發(fā)者需先下載安裝如下工具：

• HBuilderX：官方IDE下載地址

HBuilderX是通用的前端開(kāi)發(fā)工具，但為uni-app做了特別強(qiáng)化。

下載App開(kāi)發(fā)版，可開(kāi)箱即用；如下載標(biāo)準(zhǔn)版，在運(yùn)行或發(fā)行uni-app時(shí)，會(huì)提示安裝uni-app插件，插件下載完成后方可使用。

如使用cli方式創(chuàng)建項(xiàng)目，可直接下載標(biāo)準(zhǔn)版，因?yàn)閡ni-app編譯插件被安裝到項(xiàng)目下了。

創(chuàng)建uni-app

在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：

選擇uni-app，輸入工程名，如：hello-uniapp，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建 uni-app。點(diǎn)擊模板里的 Hello uni-app 即可體驗(yàn)官方示例。

運(yùn)行uni-app

1. 瀏覽器運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器里面體驗(yàn)uni-app 的 H5 版。
2. 真機(jī)運(yùn)行：連接手機(jī)，開(kāi)啟USB調(diào)試，進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 真機(jī)運(yùn)行 -> 選擇運(yùn)行的設(shè)備，即可在該設(shè)備里面體驗(yàn)uni-app。如手機(jī)無(wú)法識(shí)別，請(qǐng)點(diǎn)擊菜單運(yùn)行-運(yùn)行到手機(jī)或模擬器-真機(jī)運(yùn)行常見(jiàn)故障排查指南。 注意目前開(kāi)發(fā)App也需要安裝微信開(kāi)發(fā)者工具。
3. 在微信開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具，即可在微信開(kāi)發(fā)者工具里面體驗(yàn)uni-app。 注意：如果是第一次使用，需要先配置小程序ide的相關(guān)路徑，才能運(yùn)行成功。如下圖，需在輸入框輸入微信開(kāi)發(fā)者工具的安裝路徑。 若HBuilderX不能正常啟動(dòng)微信開(kāi)發(fā)者工具，需要開(kāi)發(fā)者手動(dòng)啟動(dòng)，然后將uni-app生成小程序工程的路徑拷貝到微信開(kāi)發(fā)者工具里面，在HBuilderX里面開(kāi)發(fā)，在微信開(kāi)發(fā)者工具里面就可看到實(shí)時(shí)的效果。uni-app默認(rèn)把項(xiàng)目編譯到根目錄的unpackage目錄。
4. 在支付寶小程序開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 支付寶小程序開(kāi)發(fā)者工具，即可在支付寶小程序開(kāi)發(fā)者工具里面體驗(yàn)uni-app。
5. 在百度開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 百度開(kāi)發(fā)者工具，即可在百度開(kāi)發(fā)者工具里面體驗(yàn)uni-app。
6. 在字節(jié)跳動(dòng)開(kāi)發(fā)者工具里運(yùn)行：進(jìn)入hello-uniapp項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 字節(jié)跳動(dòng)開(kāi)發(fā)者工具，即可在字節(jié)跳動(dòng)開(kāi)發(fā)者工具里面體驗(yàn)uni-app。

Tips

• 如果是第一次使用，需要配置開(kāi)發(fā)工具的相關(guān)路徑。點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 運(yùn)行設(shè)置，配置相應(yīng)小程序開(kāi)發(fā)者工具的路徑。
• 支付寶/百度/字節(jié)跳動(dòng)小程序工具，不支持直接指定項(xiàng)目啟動(dòng)并運(yùn)行。因此開(kāi)發(fā)工具啟動(dòng)后，請(qǐng)將 HBuilderX 控制臺(tái)中提示的項(xiàng)目路徑，在相應(yīng)小程序開(kāi)發(fā)者工具中打開(kāi)。
• 如果自動(dòng)啟動(dòng)小程序開(kāi)發(fā)工具失敗，請(qǐng)手動(dòng)啟動(dòng)小程序開(kāi)發(fā)工具并將 HBuilderX 控制臺(tái)提示的項(xiàng)目路徑，打開(kāi)項(xiàng)目。

運(yùn)行的快捷鍵是Ctrl r。 HBuilderX 還提供了快捷運(yùn)行菜單，可以按數(shù)字快速選擇要運(yùn)行的設(shè)備：

如需調(diào)試，可參考：uni-app調(diào)試

發(fā)布uni-app

打包為原生App（云端）

在HBuilderX工具欄，點(diǎn)擊發(fā)行，選擇原生app-云端打包，如下圖：

出現(xiàn)如下界面，點(diǎn)擊打包即可。

打包為原生App（離線(xiàn)）

uni-app 支持離線(xiàn)打包，在 HBuilderX 生成離線(xiàn)打包資源，然后參考 離線(xiàn)打包（或參考其他用戶(hù)寫(xiě)的 離線(xiàn)打包日記），即可進(jìn)行離線(xiàn)打包。

在HBuilderX工具欄，點(diǎn)擊發(fā)行，選擇本地打包，如下圖，點(diǎn)擊即可生成離線(xiàn)打包資源。

發(fā)布為H5

1. 在 manifest.json 的可視化界面，進(jìn)行如下配置（發(fā)行在網(wǎng)站根目錄可不配置應(yīng)用基本路徑），此時(shí)發(fā)行網(wǎng)站路徑是 www.xxx.com/h5，如：https://uniapp.dcloud.io/h5。
2. 在HBuilderX工具欄，點(diǎn)擊發(fā)行，選擇網(wǎng)站-H5手機(jī)版，如下圖，點(diǎn)擊即可生成 H5 的相關(guān)資源文件，保存于 unpackage 目錄。

注意

• history 模式發(fā)行需要后臺(tái)配置支持，詳見(jiàn)：history 模式的后端配置
• 打包部署后，在服務(wù)器上開(kāi)啟 gzip 可以進(jìn)一步壓縮文件。具體的配置，可以參考網(wǎng)上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

發(fā)布為小程序

發(fā)布為微信小程序：

1. 申請(qǐng)微信小程序AppID，參考：微信教程。
2. 在HBuilderX中頂部菜單依次點(diǎn)擊 "發(fā)行" => "小程序-微信"，輸入小程序名稱(chēng)和appid點(diǎn)擊發(fā)行即可在 unpackage/dist/build/mp-weixin 生成微信小程序項(xiàng)目代碼。
3. 在微信開(kāi)小程序發(fā)者工具中，導(dǎo)入生成的微信小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕，之后按照 “提交審核” => “發(fā)布” 小程序標(biāo)準(zhǔn)流程，逐步操作即可，詳細(xì)查看：微信官方教程。

發(fā)布為百度小程序：

1. 入駐小程序并申請(qǐng)百度小程序AppID，參考：百度小程序教程。
2. 在HBuilderX中頂部菜單依次點(diǎn)擊 "發(fā)行" => "小程序-百度"，輸入小程序名稱(chēng)和appid點(diǎn)擊發(fā)行即可在 /unpackage/dist/build/mp-baidu 生成百度小程序項(xiàng)目代碼。
3. 在百度小程序開(kāi)發(fā)者工具中，導(dǎo)入生成的百度小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕上傳代碼，之后在百度小程序的 管理中心 選擇創(chuàng)建的應(yīng)用點(diǎn)擊前往發(fā)布，選擇對(duì)應(yīng)的版本然后提交審核。

發(fā)布為支付寶小程序：

1. 入駐支付寶小程序，參考：支付寶小程序教程。
2. 在HBuilderX中頂部菜單依次點(diǎn)擊 "發(fā)行" => "小程序-支付寶"，即可在 /unpackage/dist/build/mp-alipay 生成支付寶小程序項(xiàng)目代碼。
3. 在支付寶小程序開(kāi)發(fā)者工具中，導(dǎo)入生成的支付寶小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕上傳代碼，在 支付寶小程序后臺(tái)，選擇剛提交的版本點(diǎn)擊提交審核，詳見(jiàn)：支付寶小程序文檔。

發(fā)布為頭條小程序：

1. 入駐頭條小程序，參考：頭條小程序教程。
2. 在HBuilderX中頂部菜單依次點(diǎn)擊 "發(fā)行" => "小程序-字節(jié)跳動(dòng)"，即可在 /unpackage/dist/build/mp-alipay 生成頭條小程序項(xiàng)目代碼。
3. 在字節(jié)跳動(dòng)小程序開(kāi)發(fā)者工具中，導(dǎo)入生成的頭條小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，點(diǎn)擊“上傳”按鈕上傳代碼，在 頭條小程序后臺(tái)，選擇剛提交的版本點(diǎn)擊提交審核，詳見(jiàn)：頭條小程序文檔。

發(fā)布的快捷鍵是Ctrl u。同樣可拉下快速發(fā)布菜單并按數(shù)字鍵選擇。

通過(guò)vue-cli命令行

除了可視化界面，也可以使用 cli 腳手架，可以通過(guò) vue-cli 創(chuàng)建 uni-app 項(xiàng)目。

注意：

• vue-cli 版本必須是3.x
• cli 版本更新快于HBuilderX正式版。HBuilderX正式版所包含的uni-app編譯器一般是在cli版發(fā)布一段時(shí)間并穩(wěn)定后才會(huì)更新到HBuilderX正式版。cli版適合喜歡鼓搗的嘗鮮者，其好處是可以及時(shí)獲取新功能，壞處是穩(wěn)定性不如HBuilderX正式版，但因?yàn)殚_(kāi)源，所以也歡迎開(kāi)發(fā)者一起完善。

環(huán)境安裝

全局安裝vue-cli

npm install -g @vue/cli

創(chuàng)建uni-app

vue create -p dcloudio/uni-preset-vue my-project

此時(shí)，會(huì)提示選擇項(xiàng)目模板，初次體驗(yàn)建議選擇 hello uni-app 項(xiàng)目模板，如下所示：

自定義模板

選擇自定義模板時(shí)，需要填寫(xiě) uni-app 模板地址，這個(gè)地址其實(shí)就是托管在云端的倉(cāng)庫(kù)地址。以 GitHub 為例，地址格式為 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。

更多支持的下載方式，請(qǐng)參考這個(gè)插件的說(shuō)明：download-git-repo

運(yùn)行并發(fā)布uni-app

npm run dev:%PLATFORM%npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值平臺(tái)h5H5mp-alipay支付寶小程序mp-baidu百度小程序mp-weixin微信小程序mp-toutiao頭條小程序

其他：

• dev 模式編譯出的各平臺(tái)代碼存放于根目錄下的 /dist/dev/目錄，打開(kāi)各平臺(tái)開(kāi)發(fā)工具選擇對(duì)應(yīng)平臺(tái)目錄即可進(jìn)行預(yù)覽（h5 平臺(tái)不會(huì)在此目錄，存在于緩存中）；
• build 模式編譯出的各平臺(tái)代碼存放于根目錄下的 /dist/build/ 目錄，發(fā)布時(shí)選擇此目錄進(jìn)行發(fā)布；
• dev 和 build 模式的區(qū)別：dev 模式有 SourceMap 可以方便的進(jìn)行斷點(diǎn)調(diào)試；build 模式會(huì)將代碼進(jìn)行壓縮，體積更小更適合發(fā)布為正式版應(yīng)用；進(jìn)行 環(huán)境判斷 時(shí)，dev 模式 process.env.NODE_ENV 的值為 development，build 模式 process.env.NODE_ENV 的值為 production。

使用cli創(chuàng)建項(xiàng)目和使用HBuilderX可視化界面創(chuàng)建項(xiàng)目有什么區(qū)別

編譯器的區(qū)別

• cli創(chuàng)建的項(xiàng)目，編譯器安裝在項(xiàng)目下。并且不會(huì)跟隨HBuilderX升級(jí)。如需升級(jí)編譯器，執(zhí)行npm update。
• HBuilderX可視化界面創(chuàng)建的項(xiàng)目，編譯器在HBuilderX的安裝目錄下的plugin目錄，隨著HBuilderX的升級(jí)會(huì)自動(dòng)升級(jí)編譯器。
• 已經(jīng)使用cli創(chuàng)建的項(xiàng)目，如果想繼續(xù)在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整個(gè)項(xiàng)目拖入HBuilderX，則編譯時(shí)走的是項(xiàng)目下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。
• cli可以自定義webpack，有靈活度但增加了出錯(cuò)的概率。如果想安裝less、scss、ts等編譯器，需自己手動(dòng)npm安裝。在HBuilderX的插件管理界面安裝無(wú)效，那個(gè)只作用于HBuilderX創(chuàng)建的項(xiàng)目。

開(kāi)發(fā)工具的區(qū)別

• cli創(chuàng)建的項(xiàng)目，內(nèi)置了d.ts，同其他常規(guī)npm庫(kù)一樣，可在vscode等支持d.ts的開(kāi)發(fā)工具里正常開(kāi)發(fā)并有語(yǔ)法提示。
• 但其他開(kāi)發(fā)工具比起HBuilderX，開(kāi)發(fā)效率仍有不足。詳見(jiàn)：https://ask.dcloud.net.cn/article/35451
• cli創(chuàng)建的項(xiàng)目，發(fā)布App時(shí)，仍然需要使用HBuilderX。其他開(kāi)發(fā)工具無(wú)法發(fā)布App，但可以發(fā)布H5、各種小程序。
• 如果使用cli創(chuàng)建項(xiàng)目，那下載HBuilderX時(shí)只需下載10M的標(biāo)準(zhǔn)版即可。因?yàn)榫幾g器已經(jīng)安裝到項(xiàng)目下了。