uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平台。
快速上手：
1. 通過 HBuilderX 可視化界面
可視化的方式比較簡單，HBuilderX內置相關環境，開箱即用，無需配置nodejs。
- HBuilderX：官方IDE下載地址
下載App開發版，可開箱即用；如下載標准版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。
如使用cli方式創建項目，可直接下載標准版，因為uni-app編譯插件被安裝到項目下了。
創建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：
打包為原生App（雲端）
在HBuilderX工具欄，點擊發行，選擇原生app-雲端打包，如下圖：
出現如下界面，點擊打包即可。
打包為原生App（離線）
uni-app 支持離線打包，在 HBuilderX 生成離線打包資源，然后參考 離線打包（或參考其他用戶寫的 離線打包日記），即可進行離線打包。
在HBuilderX工具欄，點擊發行，選擇本地打包，如下圖，點擊即可生成離線打包資源。
發布為H5
在 manifest.json 的可視化界面，進行如下配置（發行在網站根目錄可不配置應用基本路徑），此時發行網站路徑是 www.xxx.com/h5，如：https://uniapp.dcloud.io/h5。
在HBuilderX工具欄，點擊發行，選擇網站-H5手機版，如下圖，點擊即可生成 H5 的相關資源文件，保存於 unpackage 目錄。
注意
history模式發行需要后台配置支持，詳見：history 模式的后端配置- 打包部署后，在服務器上開啟 gzip 可以進一步壓縮文件。具體的配置，可以參考網上的分享：https://juejin.im/post/5af003286fb9a07aac24611b
發布為小程序
發布為微信小程序：
- 申請微信小程序AppID，參考：微信教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-微信"，輸入小程序名稱和appid點擊發行即可在
unpackage/dist/build/mp-weixin生成微信小程序項目代碼。
- 在微信小程序開發者工具中，導入生成的微信小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕，之后按照 “提交審核” => “發布” 小程序標准流程，逐步操作即可，詳細查看：微信官方教程。
發布為百度小程序：
- 入駐小程序並申請百度小程序AppID，參考：百度小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-百度"，輸入小程序名稱和appid點擊發行即可在
/unpackage/dist/build/mp-baidu生成百度小程序項目代碼。
- 在百度小程序開發者工具中，導入生成的百度小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，之后在百度小程序的 管理中心 選擇創建的應用點擊前往發布，選擇對應的版本然后提交審核。
發布為支付寶小程序：
- 入駐支付寶小程序，參考：支付寶小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-支付寶"，即可在
/unpackage/dist/build/mp-alipay生成支付寶小程序項目代碼。
- 在支付寶小程序開發者工具中，導入生成的支付寶小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在 支付寶小程序后台，選擇剛提交的版本點擊提交審核，詳見：支付寶小程序文檔。
發布為字節跳動小程序：
- 入駐字節跳動小程序，參考：字節跳動小程序教程。
- 在HBuilderX中頂部菜單依次點擊 "發行" => "小程序-字節跳動"，即可在
/unpackage/dist/build/mp-alipay生成字節跳動小程序項目代碼。
- 在字節跳動小程序開發者工具中，導入生成的字節跳動小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在 字節跳動小程序后台，選擇剛提交的版本點擊提交審核，詳見：字節跳動小程序文檔。
發布為QQ小程序： 內容同上，不再重復。
發布的快捷鍵是Ctrl+u。同樣可拉下快速發布菜單並按數字鍵選擇
2.通過vue-cli命令行
一套代碼編到8個平台，這不是夢想。眼見為實，掃描8個二維碼，親自體驗最全面的跨平台效果！
注：某些平台不能提交簡單demo，故補充了一些其他功能；hello uni-app示例代碼可從github獲取
2. 通過vue-cli命令行
除了HBuilderX可視化界面，也可以使用 cli 腳手架，可以通過 vue-cli 創建 uni-app 項目
環境安裝：
全局安裝vue-cli
npm install -g @vue/cli
創建uni-app：
使用正式版（對應HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
使用alpha版（對應HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
此時，會提示選擇項目模板，初次體驗建議選擇 hello uni-app 項目模板，如下所示：
自定義模板
選擇自定義模板時，需要填寫 uni-app 模板地址，這個地址其實就是托管在雲端的倉庫地址。以 GitHub 為例，地址格式為 userName/repositoryName，如 dcloudio/uni-template-picture 就是下載圖片模板。
運行並發布uni-app：
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平台 |
|---|---|
| h5 | H5 |
| mp-alipay | 支付寶小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
| mp-toutiao | 字節跳動小程序 |
| mp-qq | qq 小程序 |
其他：
- 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版如果想安裝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的標准版即可。因為編譯器已經安裝到項目下了。