01uni-app基礎教程 環境配置【Uniapp專題1】

1.uni-app是什么？

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。當然uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發框架（詳見）、更好的App跨平臺框架、更方便的H5開發框架。不管領導安排什么樣的項目，你都可以快速交付，不需要轉換開發思維、不需要更改開發習慣。

2.uni-app功能框架

一圖勝千言

3.uni-app創建項目的兩種方式

uni-app支持通過 可視化界面、vue-cli命令行 兩種方式快速創建項目。

1.可視化界面

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

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

HBuilderX：官方IDE-

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

下載之后解壓縮運行exe文件

選擇新建項目

選擇uni-app類型，輸入項目名，選擇模板，點擊創建，即可成功創建。

uni-app自帶的模板有。Hello uni-app，是官方的組件和API示例。還有一個重要模板是uni ui項目模板，日常開發推薦使用該模板，已內置大量常用組件。

2.cli 腳手架

除了HBuilderX可視化界面，也可以使用 cli 腳手架，可以通過 vue-cli 創建 uni-app 項目。

全局安裝vue-cli

npm install -g @vue/cli

使用正式版（對應HBuilderX最新正式版）

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

使用alpha版（對應HBuilderX最新alpha版）

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

使用Vue3/Vite版

創建以 javascript 開發的工程（如命令行創建失敗，請直接訪問

gitee

下載模板）

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

創建以 typescript 開發的工程（如命令行創建失敗，請直接訪問

gitee

下載模板）

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此時，會提示選擇項目模板（使用Vue3/Vite版不會提示，目前只支持創建默認模板），初次體驗建議選擇 hello uni-app 項目模板，如下所示：

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

更多支持的下載方式，請參考這個插件的說明：download-git-repo

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

%PLATFORM% 可取值如下：

可以自定義更多條件編譯平臺，比如釘釘小程序，參考package.json文檔。

cli 創建的項目，編譯器安裝在項目下。并且不會跟隨HBuilderX升級。如需升級編譯器，可以使用 @dcloudio/uvm 管理編譯器的版本，如 npx @dcloudio/uvm。

HBuilderX可視化界面創建的項目，編譯器在HBuilderX的安裝目錄下的plugin目錄，隨著HBuilderX的升級會自動升級編譯器。

已經使用cli創建的項目，如果想繼續在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整個項目拖入HBuilderX，則編譯時走的是項目下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。

cli版如果想安裝less、scss、ts等編譯器，需自己手動npm安裝。在HBuilderX的插件管理界面安裝無效，那個只作用于HBuilderX創建的項目。

cli創建的項目，內置了d.ts，同其他常規npm庫一樣，可在vscode、webstorm等支持d.ts的開發工具里正常開發并有語法提示。

使用HBuilderX創建的項目不帶d.ts，HBuilderX內置了uni-app語法提示庫。如需把HBuilderX創建的項目在其他編輯器打開并且補充d.ts，可以在項目下先執行 npm init，然后npm i @types/uni-app -D，來補充d.ts。

但vscode等其他開發工具，在vue或uni-app領域，開發效率比不過HBuilderX。詳見：https://ask.dcloud.net.cn/article/35451

發布App時，仍然需要使用HBuilderX。其他開發工具無法發布App，但可以發布H5、各種小程序。如需開發App，可以先在HBuilderX里運行起來，然后在其他編輯器里修改保存代碼，代碼修改后會自動同步到手機基座。

如果使用cli創建項目，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經安裝到項目下了。

4.運行uni-app

1.瀏覽器運行：

進入hello-uniapp項目，點擊工具欄的運行->運行到瀏覽器->選擇瀏覽器，即可在瀏覽器里面體驗uni-app的H5版。

運行成功

2.在微信開發者工具里運行：

需要先配置小程序ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑

若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可以看到實時的效果。uni-app或將項目編譯到根目錄的unpackage目錄。

進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->微信開發者工具，即可在微信開發者工具里體驗uniapp

3.運行App到手機或模擬器：

連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行 -> 真機運行 -> 選擇運行的設備，即可在該設備里面體驗uni-app。

4.在支付寶小程序開發者工具里運行：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 支付寶小程序開發者工具，即可在支付寶小程序開發者工具里面體驗uni-app。

5.在百度開發者工具里運行：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 百度開發者工具，即可在百度開發者工具里面體驗uni-app。

6.在字節跳動開發者工具里運行：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 字節跳動開發者工具，即可在字節跳動開發者工具里面體驗uni-app。

7.在360開發工具中導入：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 360開發工具，即可在360開發工具里面體驗uni-app。注意360工具只有windows版

8.在快應用聯盟工具里運行：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 快應用聯盟工具，即可在快應用聯盟工具里面體驗uni-app。

9.在華為開發者工具里運行：

進入hello-uniapp項目，點擊工具欄的運行 -> 運行到小程序模擬器 -> 華為開發者工具，即可在華為開發者工具里面體驗uni-app。

Tips

如果是第一次使用，需要配置開發工具的相關路徑。點擊工具欄的運行 -> 運行到小程序模擬器 -> 運行設置，配置相應小程序開發者工具的路徑。

支付寶/百度/字節跳動/360小程序工具，不支持直接指定項目啟動并運行。因此開發工具啟動后，請將 HBuilderX 控制臺中提示的項目路徑，在相應小程序開發者工具中打開。

如果自動啟動小程序開發工具失敗，請手動啟動小程序開發工具并將 HBuilderX 控制臺提示的項目路徑，打開項目。

運行的快捷鍵是Ctrl+r。

5.手機模擬器

下載手機模擬器

MUMU模擬器：https://mumu.163.com/

模擬器端口：

6.目錄結構

一個 uni-app 工程，默認包含如下目錄及文件：

┌─components uni-app組件目錄 │ └─comp-a.vue 可復用的a組件 ├─hybrid 存放本地網頁的目錄，詳見 ├─platforms 存放各平臺專用頁面的目錄，詳見 ├─pages 業務頁面文件存放的目錄 │ ├─index │ │ └─index.vue index頁面 │ └─list │ └─list.vue list頁面 ├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 ├─wxcomponents 存放小程序組件的目錄，詳見 ├─main.js Vue初始化入口文件 ├─App.vue 應用配置，用來配置App全局樣式以及監聽 應用生命周期 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見 └─pages.json 配置頁面路由、導航條、選項卡等頁面類信息，詳見

謝謝大家的支持

JavaScript 小程序 移動APP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。