uni-app預設使用uni-ui全端相容的、高性能UI架構，在我們開發過程中可以滿足大部分的需求了，并且如果是為了相容性，還是強烈建議使用uni-ui作為UI架構使用。
如果作為初創公司，自身又不想費太多精力去自己設計一套UI架構，那麼DCloud插件市場提供了很多優秀的UI架構，最重要的是有些UI架構能夠提供一整套行業的頁面模闆，比如，前幾年電商項目比較火，Vant、ColorUI等提供了一整套電商模闆方案，界面設計非常精美。
項目之前使用過ColorUI，可惜的是ColorUI已經好久沒更新了，後續是否能夠繼續更新還是個未知數，最近剛好要做一個類似于論壇圈子的移動應用，在DCloud插件市場找到了界面設計美觀、基礎元件豐富的圖鳥UI和圖鳥模闆-圈子，接下來以圖鳥UI為例介紹如何在uni-app項目中內建第三方UI并實作登入注冊功能。
一、導入圖鳥UI庫并配置生效
以下部分内容參考圖鳥UI官方部署文檔
1、首先從DCloud插件市場下載下傳ZIP包或者直接使用HBuilderX導入插件
官方插件搜尋下載下傳,我這裡是直接使用HBuilderX導入插件，可以友善預覽插件，複制檔案操作也可以在HBuilderX中進行，相比較下載下傳ZIP會友善一點。
2、整合圖鳥UI的store檔案
- 在gitegg-uni-app-v2的/store/modules檔案夾下建立tuniao.js ,複制圖鳥UI項目下 /store/index.js内容到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複制必須的庫檔案到我們建立的uni-app項目中
- 将圖鳥UI項目根目錄下的tuniao-ui目錄複制到gitegg-uni-app-v2根目錄下
- 将圖鳥UI項目根目錄下的static/css目錄複制到gitegg-uni-app-v2的static/css目錄
- 将圖鳥UI項目根目錄下的libs目錄複制到gitegg-uni-app-v2根目錄下
4、在項目中引入TuniaoUI主JS庫
在gitegg-uni-app-v2項目根目錄中的main.js中，引入并使用TuniaoUI的JS庫，注意這兩行配置代碼要放在import Vue之後。
// 引入全局TuniaoUI主JS庫
import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI)
5、引入TuniaoUI的全局SCSS主題檔案
在gitegg-uni-app-v2項目根目錄的uni.scss中引入tuniao-ui/theme.scss檔案。
@import 'tuniao-ui/theme.scss';
6、配置easycom元件模式
修改page.json檔案，增加easycom元件配置，確定pages.json中隻有一個easycom字段。
easycom元件模式：傳統vue元件，需要安裝、引用、注冊，三個步驟後才能使用元件。easycom将其精簡為一步。 隻要元件安裝在項目的components目錄下，并符合components/元件名稱/元件名稱.vue目錄結構。就可以不用引用、注冊，直接在頁面中使用。
// pages.json
{
"easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
},
"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
// ......
}
]
// ......
}
二、複制模闆頁面檔案并預覽
上面的操作将圖鳥UI基礎庫的内容複制內建到了我們的uni-app項目中，我們在實際開發過程中可能并不需要所有的頁面模闆檔案，否則會使程式多了很多無用代碼。
1、複制圖鳥UI根目錄下/templatePage/login/demo1/demo1.vue檔案，替換我們gitegg-uni-app-v2目錄下的login.vue内容
2、啟動手機模拟器 > 輕按兩下桌面的nox_adb快捷方式(如果已啟動，可以忽略此步驟)
3、在HBuilder X中依次點選 運作 -> 運作到手機或模拟器 -> 運作到Android App基座
4、彈出框會顯示我們已連接配接的模拟器，點選運作，HBuilderX就可以自動打包app釋出到模拟器中運作，并可以在HBuilderX控制台檢視運作日志
5、圖鳥UI的登入頁面預覽
源碼位址:
Gitee:
https://gitee.com/wmz1930/GitEgg
GitHub:
https://github.com/wmz1930/GitEgg