??uni-app默認(rèn)使用uni-ui全端兼容的牵现、高性能UI框架，在我們開(kāi)發(fā)過(guò)程中可以滿足大部分的需求了朽缴，并且如果是為了兼容性，還是強(qiáng)烈建議使用uni-ui作為UI框架使用水援。
??如果作為初創(chuàng)公司密强，自身又不想費(fèi)太多精力去自己設(shè)計(jì)一套UI框架，那么DCloud插件市場(chǎng)提供了很多優(yōu)秀的UI框架蜗元，最重要的是有些UI框架能夠提供一整套行業(yè)的頁(yè)面模板或渤，比如，前幾年電商項(xiàng)目比較火奕扣，Vant薪鹦、ColorUI等提供了一整套電商模板方案，界面設(shè)計(jì)非常精美惯豆。
??項(xiàng)目之前使用過(guò)ColorUI池磁，可惜的是ColorUI已經(jīng)好久沒(méi)更新了，后續(xù)是否能夠繼續(xù)更新還是個(gè)未知數(shù)楷兽，最近剛好要做一個(gè)類似于論壇圈子的移動(dòng)應(yīng)用地熄，在DCloud插件市場(chǎng)找到了界面設(shè)計(jì)美觀、基礎(chǔ)組件豐富的圖鳥(niǎo)UI和圖鳥(niǎo)模板-圈子芯杀，接下來(lái)以圖鳥(niǎo)UI為例介紹如何在uni-app項(xiàng)目中集成第三方UI并實(shí)現(xiàn)登錄注冊(cè)功能端考。
一、導(dǎo)入圖鳥(niǎo)UI庫(kù)并配置生效
以下部分內(nèi)容參考圖鳥(niǎo)UI官方部署文檔
1揭厚、首先從DCloud插件市場(chǎng)下載ZIP包或者直接使用HBuilderX導(dǎo)入插件
??官方插件搜索下載,我這里是直接使用HBuilderX導(dǎo)入插件却特，可以方便預(yù)覽插件，復(fù)制文件操作也可以在HBuilderX中進(jìn)行筛圆，相比較下載ZIP會(huì)方便一點(diǎn)核偿。
2、整合第三方UI的store文件
- 在gitegg-uni-app-v2的/store/modules文件夾下新建tuniao.js ,復(fù)制圖鳥(niǎo)UI項(xiàng)目下 /store/index.js內(nèi)容到tuniao.js中顽染，將const store = new Vuex.Store修改為const tuniao = new Vuex.Store 漾岳，將export default store修改為export default tuniao
- 修改gitegg-uni-app-v2的/store/index.js轰绵，引入tuniao.js
tuniao.js
......
const store = new Vuex.Store({
......
})
......
export default store
index.js
......
import tuniao from './modules/tuniao'
......
modules: {
user,
tuniao
},
......
3、將第三方UI復(fù)制必須的庫(kù)文件到我們新建的uni-app項(xiàng)目中
- 將圖鳥(niǎo)UI項(xiàng)目根目錄下的tuniao-ui目錄復(fù)制到gitegg-uni-app-v2根目錄下
- 將圖鳥(niǎo)UI項(xiàng)目根目錄下的static/css目錄復(fù)制到gitegg-uni-app-v2的static/css目錄
- 將圖鳥(niǎo)UI項(xiàng)目根目錄下的libs目錄復(fù)制到gitegg-uni-app-v2根目錄下
4尼荆、在項(xiàng)目中引入TuniaoUI主JS庫(kù)
??在gitegg-uni-app-v2項(xiàng)目根目錄中的main.js中左腔，引入并使用TuniaoUI的JS庫(kù)，注意這兩行配置代碼要放在import Vue之后捅儒。
// 引入全局TuniaoUI主JS庫(kù)
import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI)
5液样、引入TuniaoUI的全局SCSS主題文件
??在gitegg-uni-app-v2項(xiàng)目根目錄的uni.scss中引入tuniao-ui/theme.scss文件。
@import 'tuniao-ui/theme.scss';
6巧还、配置easycom組件模式
??修改page.json文件鞭莽，增加easycom組件配置，確保pages.json中只有一個(gè)easycom字段麸祷。
??easycom組件模式：傳統(tǒng)vue組件澎怒，需要安裝、引用阶牍、注冊(cè)喷面，三個(gè)步驟后才能使用組件。easycom將其精簡(jiǎn)為一步走孽。 只要組件安裝在項(xiàng)目的components目錄下惧辈，并符合components/組件名稱/組件名稱.vue目錄結(jié)構(gòu)。就可以不用引用磕瓷、注冊(cè)盒齿，直接在頁(yè)面中使用。
// pages.json
{
"easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
},
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)困食，參考：https://uniapp.dcloud.io/collocation/pages
{
// ......
}
]
// ......
}
二县昂、復(fù)制模板頁(yè)面文件并預(yù)覽
??上面的操作將圖鳥(niǎo)UI基礎(chǔ)庫(kù)的內(nèi)容復(fù)制集成到了我們的uni-app項(xiàng)目中，我們?cè)趯?shí)際開(kāi)發(fā)過(guò)程中可能并不需要所有的頁(yè)面模板文件陷舅，否則會(huì)使程序多了很多無(wú)用代碼倒彰。
1、復(fù)制圖鳥(niǎo)UI根目錄下/templatePage/login/demo1/demo1.vue文件莱睁，替換我們gitegg-uni-app-v2目錄下的login.vue內(nèi)容
2待讳、啟動(dòng)手機(jī)模擬器 > 雙擊桌面的nox_adb快捷方式(如果已啟動(dòng)，可以忽略此步驟)
3仰剿、在HBuilder X中依次點(diǎn)擊 運(yùn)行 -> 運(yùn)行到手機(jī)或模擬器 -> 運(yùn)行到Android App基座
4创淡、彈出框會(huì)顯示我們已連接的模擬器，點(diǎn)擊運(yùn)行南吮，HBuilderX就可以自動(dòng)打包app發(fā)布到模擬器中運(yùn)行琳彩，并可以在HBuilderX控制臺(tái)查看運(yùn)行日志
5、第三方UI的登錄頁(yè)面預(yù)覽
??第三方UI框架集成之后，就可以直接使用其中已經(jīng)設(shè)計(jì)完善好的組件了露乏。在業(yè)務(wù)的開(kāi)發(fā)過(guò)程中碧浊，每個(gè)行業(yè)都有自己特需的組件，使用這些設(shè)計(jì)好的組件瘟仿，可以節(jié)省時(shí)間箱锐，快速完成業(yè)務(wù)需求。
GitEgg-Cloud是一款基于SpringCloud整合搭建的企業(yè)級(jí)微服務(wù)應(yīng)用開(kāi)發(fā)框架劳较，開(kāi)源項(xiàng)目地址:
Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg
歡迎感興趣的小伙伴Star支持一下驹止。
