uni-app支援通過 HBuilderX視覺化介面、vue-cli命令列兩種方式快速建立專案。

通過 HBuilderX 視覺化介面

視覺化的方式比較簡單，HBuilderX內建相關環境，開箱即用，無需配置nodejs。

開始之前，開發者需先下載安裝如下工具：

HBuilderX：官方IDE下載地址

HBuilderX是通用的前端開發工具，但為uni-app做了特別強化。

下載App開發版，可開箱即用；如下載標準版，在執行或發行uni-app時，會提示安裝uni-app外掛，外掛下載完成後方可使用。

如使用cli方式建立專案，可直接下載標準版，因為uni-app編譯外掛被安裝到專案下了。

選擇uni-app，輸入工程名，如：hello-uniapp，點選建立，即可成功建立 uni-app。點選模板裡的 Hello uni-app 即可體驗官方示例。

執行uni-app瀏覽器執行：進入hello-uniapp專案，點選工具欄的執行 -> 執行到瀏覽器 -> 選擇瀏覽器，即可在瀏覽器裡面體驗uni-app 的 H5 版。真機執行：連線手機，開啟USB除錯，進入hello-uniapp專案，點選工具欄的執行 -> 真機執行 -> 選擇執行的裝置，即可在該裝置裡面體驗uni-app。如手機無法識別，請點選選單執行-執行到手機或模擬器-真機執行常見故障排查指南。 注意目前開發App也需要安裝微信開發者工具。在微信開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行 -> 執行到小程式模擬器 -> 微信開發者工具，即可在微信開發者工具裡面體驗uni-app。 注意：如果是第一次使用，需要先配置小程式ide的相關路徑，才能執行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。 若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然後將uni-app生成小程式工程的路徑拷貝到微信開發者工具裡面，在HBuilderX裡面開發，在微信開發者工具裡面就可看到實時的效果。uni-app預設把專案編譯到根目錄的unpackage目錄。 在支付寶小程式開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行 -> 執行到小程式模擬器 -> 支付寶小程式開發者工具，即可在支付寶小程式開發者工具裡面體驗uni-app。 在百度開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行 -> 執行到小程式模擬器 -> 百度開發者工具，即可在百度開發者工具裡面體驗uni-app。 在位元組跳動開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行 -> 執行到小程式模擬器 -> 位元組跳動開發者工具，即可在位元組跳動開發者工具裡面體驗uni-app。

Tips

如果是第一次使用，需要配置開發工具的相關路徑。點選工具欄的執行 -> 執行到小程式模擬器 -> 執行設定，配置相應小程式開發者工具的路徑。支付寶/百度/位元組跳動小程式工具，不支援直接指定專案啟動並執行。因此開發工具啟動後，請將 HBuilderX 控制檯中提示的專案路徑，在相應小程式開發者工具中開啟。如果自動啟動小程式開發工具失敗，請手動啟動小程式開發工具並將 HBuilderX 控制檯提示的專案路徑，開啟專案。

執行的快捷鍵是Ctrl+r。 HBuilderX 還提供了快捷執行選單，可以按數字快速選擇要執行的裝置：

如需除錯，可參考：uni-app除錯

釋出uni-app打包為原生App（雲端）

在HBuilderX工具欄，點擊發行，選擇原生app-雲端打包，如下圖：

打包為原生App（離線）

uni-app 支援離線打包，在 HBuilderX 生成離線打包資源，然後參考 離線打包（或參考其他使用者寫的 離線打包日記），即可進行離線打包。

注意

history 模式發行需要後臺配置支援，詳見：history 模式的後端配置打包部署後，在伺服器上開啟 gzip 可以進一步壓縮檔案。具體的配置，可以參考網上的分享：https://juejin.im/post/5af003286fb9a07aac24611b釋出為小程式

釋出為微信小程式：

申請微信小程式AppID，參考：微信教程。在HBuilderX中頂部選單依次點選 "發行" => "小程式-微信"，輸入小程式名稱和appid點擊發行即可在 unpackage/dist/build/mp-weixin 生成微信小程式專案程式碼。在微信開小程式發者工具中，匯入生成的微信小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕，之後按照 “提交稽核” => “釋出” 小程式標準流程，逐步操作即可，詳細檢視：微信官方教程。

釋出為百度小程式：

入駐小程式並申請百度小程式AppID，參考：百度小程式教程。在HBuilderX中頂部選單依次點選 "發行" => "小程式-百度"，輸入小程式名稱和appid點擊發行即可在 /unpackage/dist/build/mp-baidu 生成百度小程式專案程式碼。在百度小程式開發者工具中，匯入生成的百度小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕上傳程式碼，之後在百度小程式的 管理中心 選擇建立的應用點選前往釋出，選擇對應的版本然後提交稽核。

釋出為支付寶小程式：

通過vue-cli命令列

除了視覺化介面，也可以使用 cli 腳手架，可以通過 vue-cli 建立 uni-app 專案。

注意：

vue-cli 版本必須是3.xcli 版本更新快於HBuilderX正式版。HBuilderX正式版所包含的uni-app編譯器一般是在cli版釋出一段時間並穩定後才會更新到HBuilderX正式版。cli版適合喜歡鼓搗的嚐鮮者，其好處是可以及時獲取新功能，壞處是穩定性不如HBuilderX正式版，但因為開源，所以也歡迎開發者一起完善。環境安裝

全域性安裝vue-cli

npm install -g @vue/cli

建立uni-app

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

此時，會提示選擇專案模板，初次體驗建議選擇 hello uni-app 專案模板，如下所示：

自定義模板

選擇自定義模板時，需要填寫 uni-app 模板地址，這個地址其實就是託管在雲端的倉庫地址。以 GitHub 為例，地址格式為 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。

更多支援的下載方式，請參考這個外掛的說明：download-git-repo

執行併發布uni-app

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

%PLATFORM% 可取值如下：

其他：

dev 模式編譯出的各平臺程式碼存放於根目錄下的 /dist/dev/目錄，開啟各平臺開發工具選擇對應平臺目錄即可進行預覽（h5 平臺不會在此目錄，存在於快取中）；build 模式編譯出的各平臺程式碼存放於根目錄下的 /dist/build/ 目錄，釋出時選擇此目錄進行釋出；dev 和 build 模式的區別：dev 模式有 SourceMap 可以方便的進行斷點除錯；build 模式會將程式碼進行壓縮，體積更小更適合釋出為正式版應用；進行 環境判斷 時，dev 模式 process.env.NODE_ENV 的值為 development，build 模式 process.env.NODE_ENV 的值為 production。使用cli建立專案和使用HBuilderX視覺化介面建立專案有什麼區別編譯器的區別cli建立的專案，編譯器安裝在專案下。並且不會跟隨HBuilderX升級。如需升級編譯器，執行npm update。HBuilderX視覺化介面建立的專案，編譯器在HBuilderX的安裝目錄下的plugin目錄，隨著HBuilderX的升級會自動升級編譯器。已經使用cli建立的專案，如果想繼續在HBuilderX裡使用，可以把工程拖到HBuilderX中。注意如果是把整個專案拖入HBuilderX，則編譯時走的是專案下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。cli可以自定義webpack，有靈活度但增加了出錯的概率。如果想安裝less、scss、ts等編譯器，需自己手動npm安裝。在HBuilderX的外掛管理介面安裝無效，那個只作用於HBuilderX建立的專案。開發工具的區別cli建立的專案，內建了d.ts，同其他常規npm庫一樣，可在vscode等支援d.ts的開發工具里正常開發並有語法提示。但其他開發工具比起HBuilderX，開發效率仍有不足。詳見：https://ask.dcloud.net.cn/article/35451cli建立的專案，釋出App時，仍然需要使用HBuilderX。其他開發工具無法釋出App，但可以釋出H5、各種小程式。如果使用cli建立專案，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經安裝到專案下了。