SpringCloud微服務實戰——搭建企業級開發框架（四十八）：【移動開發】整合uni-app搭建行動端快速開發框架-使用第三方UI框架

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