uni-app開發一次，覆蓋多端的前端框架

uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H五、小程序等多個平臺。

一套代碼，運行多個平臺

uni-app實現了一套代碼，同時運行到多個平臺；以下圖所示，一套代碼，同時運行到iOS模擬器、Android模擬器、H五、微信開發者工具、支付寶小程序Studio、百度開發者工具、字節跳動開發者工具（底部7個終端選項卡表明7個終端模擬器）：

運行效果圖以下：

 

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

• HBuilderX：官方IDE下載地址

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

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

如使用cli方式建立項目，可直接下載標準版，由於uni-app編譯插件被安裝到項目下了。

經過vue-cli命令行

除了可視化界面，也能夠使用 cli 腳手架，能夠經過 vue-cli 建立 uni-app 項目。

注意：vue-cli 版本必須是3.x

注意：cli 版本更新快於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% 可取值以下：

值	平臺
h5	H5
mp-alipay	支付寶小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	頭條小程序

 

 

 

 

 

 

 

 

相關具體介紹請去官方網站了解： http://www.dcloud.io