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

語言: CN / TW / HK

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

「前端實驗室」 專注分享 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目前穩定版本基於Vue2Vue3 版本正在內測,很快就會發布

使用方式

圖鳥 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 天,點擊查看活動詳情