介紹
Vue-Blu是基於Vuejs和Bulma開發的開源UI組件庫。旨在為PC端的前端開發(特別是中後臺產品)提供一個快速且靈活的解決方案。
Bulma是一個基於Flexbox的免費開源CSS框架，已有200,000多名開發人員使用；筆者曾經也介紹過這一款css框架，目前star數已突破38.9k，確實是一個非常受歡迎的純css框架
項目地址
- vue-blu
https://github.com/chenz24/vue-blu
- Bulma
https://github.com/jgthms/bulma/
特性
- 基於 npm + webpack + babel 開發，支持 ES2015
- 全面、靈活且強大的ui組件，API友好
- 樣式基於Bulma框架(Flexbox based)，佈局簡單、響應式
- 可定製化
安裝
<code>$ npm install vue-blu --save
/<code>
快速開始
<code>import Vue from 'vue'
import VueBlu from 'vue-blu'
import 'vue-blu/dist/css/vue-blu.min.css'
Vue.use(VueBlu)/<code>
組件
- Helper 幫助說明
Vue-Blu的樣式庫採用了bulma —— 一套新興的、基於Flexbox、現代化的純css框架。我們並不主張過度'組件化'，像layout、button之類的元素，原生已經有了足夠的表達力， 組件化之後反而會降低效率和靈活性
- 佈局
基於flexbox，強大的佈局工具。
- 按鈕
- 麵包屑
在一個帶有層次的導航結構中標明當前頁面的位置，並可返回上級
- 下拉菜單Dropdown
- 分頁組件
- 菜單Menu
- 步驟條
步驟條，常用於分步操作
- Tab標籤頁
選項卡切換，常用於內容的收納和展現
- Alert警示框
警告提示，展現需要關注的信息。
- 側邊模態框
從側邊滑出的模態框
- 摺疊面板
可摺疊展開的內容區域
- 模態框
模態對話框
- 通知提示框
全局的消息提示
- tag標籤
對不同事物的屬性或維度進行標記和分類的小標籤
- 進度條
為當前工作流程和動作提供實時反饋
- Popover
鼠標click/hover，彈出氣泡似的浮層。類似popover，但可承載更多內容
- tips
簡單的文字提示氣泡框，常用於鼠標hover時
- 時間線
垂直按時間展示的信息流
- DataTable表格
列表展示結構化的數據，支持排序、分頁、自定義操作等複雜行為
- 表單
對於表單的樣式和佈局等展現方面的實現，我們認為原生的HTML元素加CSS足以滿足，特別是有了Bulma。所以Blu的Form基本全部依賴於Bulma。對於某些功能性的表單組件如AutoComplete、Select， Blu會另有封裝。
- 數字輸入
用在數字的輸入場景中，可使用鼠標和鍵盤操作
- Radio單選框
- CheckBox複選框
- Switch開關
- 日期
日期時間選擇器,基於輕量且強大的 flatpickr
總結
不論是從UI還是從功能，以及從組件豐富程度來看，Vue-Blu都是非常值得使用的一個Vue的組件，可以不必拘泥於市面上最常用的UI，偶爾換一下風格也是非常有必要的！enjoy IT！
閱讀更多 最美分享Coder 的文章
