大家好,我是前端實驗室的老魚！一名資深的網際網路玩家，專注分享大前端領域技術、面試寶典、學習資料等 | 副業賺錢~

「前端實驗室」 專注分享 Github、Gitee等開源社群優質的前端專案、前端技術、前端學習資源以及前端資訊等各種有趣實用的前端內容。 pc端和移動端的UI元件庫有非常多，但是小程式適合uniapp的比較好用的UI元件庫就沒那麼多了，大家常用的也就vant了，而今天小師妹就給大家介紹一個基於 uni-app 開發、免費可商用的微信小程式UI框架

圖鳥 UI

圖鳥 UI 是一款基於 uni-app 進行開發的 UI 框架，內含常用表單元件、資訊展示元件等，並提供豐富的酷炫頁面模板。

作者是一位優秀的 UI 設計師 / 自由開發者。目前圖鳥 UI 以 uni-app 外掛的方式提供，已經支援釋出到 H5 / App 和微信小程式。

特點

包含基礎常用的佈局元素，flex、grid、浮動
完整一體的配色體系，包含4種色深模式，同時包含4套漸變配色
300+風格統一的圖示icon，後續可繼續增加
30+精選元件，讓開發者可以快速進行開發
酷炫常用的頁面模板，更有讓你眼前一亮的介面效果
圖片素材語雀便捷下載，圖鳥社群共同成長
使用文件詳盡說明，讓你一文讀懂圖鳥UI

樣式

圖鳥 UI目前穩定版本基於Vue2，Vue3 版本正在內測，很快就會發布

使用方式

圖鳥 UI 是以 uni-app 的外掛方式分發,需要在 HbuilderX 上匯入來使用。匯入了必要的檔案後，只需要幾步就能跑起來：

1.複製檔案到專案的根目錄

必要資料夾：
- 複製tuniao-ui資料夾
- 複製store資料夾
如果使用了模板頁面則需要複製以下資料夾 -複製libs資料夾 -複製static資料夾 2.引入TuniaoUI主JS庫在專案根目錄中的main.js中，引入並使用TuniaoUI的JS庫，注意這兩行配置程式碼要放在import Vue之後。

// 引入全域性TuniaoUI import TuniaoUI from 'tuniao-ui' Vue.use(TuniaoUI)

3.引入TuniaoUI提供的vuex 在專案根目錄的main.js中引入store

``` // 引入store import store from './store' ... const app = new Vue({ store, ...App })

// 引入TuniaoUI提供的vuex簡寫方法 let vuexStore = require('@/store/$t.mixin.js') Vue.mixin(vuexStore) ```

4.引入TuniaoUI的全域性SCSS主題檔案

// 在專案根目錄的uni.scss中引入此檔案。 @import 'tuniao-ui/theme.scss';

5.引入TuniaoUI基礎樣式和圖示檔案

<style lang="scss"> /* 注意要寫在第一行，同時給style標籤加入lang="scss"屬性 */ @import './tuniao-ui/index.scss'; @import './tuniao-ui/iconfont.css'; </style>

gitee連結：https://gitee.com/TSpecific/tuniao-ui

語雀文件：https://www.yuque.com/tuniao

最後

我是前端實驗室的老魚！一名資深的網際網路玩家，專注分享大前端領域技術、面試寶典、學習資料、副業等~

喜歡的朋友，點贊收藏支援一下，也歡迎交流~

啟掘金成長之旅！這是我參與「掘金日新計劃 · 2 月更文挑戰」的第 11 天，點選檢視活動詳情

這套顏值超高的前端UI 框架一定不能錯過！！！

圖鳥 UI

特點

樣式

使用方式

最後