又大又粗又猛免费视频久久_国产理论在线播放_久久男人av资源网站免费软件_99国产精品无码

整合uni-app搭建移動(dòng)端快速開發(fā)框架-使用第三方UI框架（uni-app ui框架）

科研百科 2023年3月26日上午10:00 1378

?uni-app默認(rèn)使用uni-ui全端兼容的、高性能UI框架，在我們開發(fā)過程中可以滿足大部分的需求了，并且如果是為了兼容性，還是強(qiáng)烈建議使用uni-ui作為UI框架使用。
??如果作為初創(chuàng)公司，自身又不想費(fèi)太多精力去自己設(shè)計(jì)一套UI框架，那么DCloud插件市場(chǎng)提供了很多優(yōu)秀的UI框架，最重要的是有些UI框架能夠提供一整套行業(yè)的頁面模板，比如，前幾年電商項(xiàng)目比較火，Vant、ColorUI等提供了一整套電商模板方案，界面設(shè)計(jì)非常精美。
??項(xiàng)目之前使用過ColorUI，可惜的是ColorUI已經(jīng)好久沒更新了，后續(xù)是否能夠繼續(xù)更新還是個(gè)未知數(shù)，最近剛好要做一個(gè)類似于論壇圈子的移動(dòng)應(yīng)用，在DCloud插件市場(chǎng)找到了界面設(shè)計(jì)美觀、基礎(chǔ)組件豐富的圖鳥UI和圖鳥模板-圈子，接下來以圖鳥UI為例介紹如何在uni-app項(xiàng)目中集成第三方UI并實(shí)現(xiàn)登錄注冊(cè)功能。

一、導(dǎo)入圖鳥UI庫并配置生效

以下部分內(nèi)容參考圖鳥UI官方部署文檔

1、首先從DCloud插件市場(chǎng)下載ZIP包或者直接使用HBuilderX導(dǎo)入插件

??官方插件搜索下載,我這里是直接使用HBuilderX導(dǎo)入插件，可以方便預(yù)覽插件，復(fù)制文件操作也可以在HBuilderX中進(jìn)行，相比較下載ZIP會(huì)方便一點(diǎn)。

整合uni-app搭建移動(dòng)端快速開發(fā)框架-使用第三方UI框架（uni-app ui框架）

2、整合圖鳥UI的store文件

在gitegg-uni-app-v2的/store/modules文件夾下新建tuniao.js ,復(fù)制圖鳥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ù)制必須的庫文件到我們新建的uni-app項(xiàng)目中

將圖鳥UI項(xiàng)目根目錄下的tuniao-ui目錄復(fù)制到gitegg-uni-app-v2根目錄下
將圖鳥UI項(xiàng)目根目錄下的static/css目錄復(fù)制到gitegg-uni-app-v2的static/css目錄
將圖鳥UI項(xiàng)目根目錄下的libs目錄復(fù)制到gitegg-uni-app-v2根目錄下

4、在項(xiàng)目中引入TuniaoUI主JS庫

??在gitegg-uni-app-v2項(xiàng)目根目錄中的main.js中，引入并使用TuniaoUI的JS庫，注意這兩行配置代碼要放在import Vue之后。

// 引入全局TuniaoUI主JS庫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è)，直接在頁面中使用。

// pages.json{ "easycom": { "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue" }, "pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages { // ...... } ] // ......}