2018 年來臨之際,繼最熱的 React 組件庫和 Angular 組件庫之后,這里有 11 個流行和實(shí)用的 Vue.js 組件庫完善你的下一個用 Vue.JS 編寫 UI 界面的應(yīng)用程序隙袁。
與 React 和 Angular 不同的是,Vue.js 是 Evan You 通過眾包(?crowd-sourcing)來維護(hù)的一個開源項(xiàng)目弃榨。 這也是 Vue.js 最好的一部分菩收,因?yàn)闀膭钅銓懗龈玫拇a和更好的文檔。
Vue.js 項(xiàng)目在得到 8 萬多個 star 的時候鲸睛,Adobe娜饵,Gitlab 和 其他公司也都使用了它,它的受歡迎程度超過了想象官辈,而且人氣似乎還在繼續(xù)增長箱舞。
Vue 成功的很大一部分在于其組件。使用其組件你可以獨(dú)立思考 UI 的每個片段拳亿,鼓勵可重用性和模塊化晴股,并幫助保持 UI 的一致性。所有的 Vue 組件也都是 Vue 實(shí)例肺魁,所以接受相同的選項(xiàng)對象并提供相同的生命周期鉤子函數(shù)电湘。
組件也可以與 Bit 共享來連接像 Git,Yarn 和 NPM 這樣的工具万搔,以形成存儲庫之間的無摩擦代碼共享體驗(yàn)胡桨。 也可以將任何 Git 存儲庫中的組件分離出來,并將其快速分享給動態(tài)和可固定的組件集合瞬雹。 從那里,組件可以被單獨(dú)發(fā)現(xiàn)并打包給管理者一起使用刽虹,或者在任何存儲庫中進(jìn)行進(jìn)一步修改酗捌。
1.Vuetify
Vuetifyjs根據(jù)材料設(shè)計(jì)規(guī)格提供 UI 布局。 V 1.0 Alpha 版本提供了超過 80個 reusbale 組件涌哲,其中包含一個易于記憶的語義設(shè)計(jì)胖缤,它基于名稱簡單明了 type-as-you 的類型屬性。在GitHub 上有超過 7K 的 star阀圾。
Vue?Material 是一個實(shí)現(xiàn) Google’s material design 的 Vue 組件庫哪廓,大約有 5K 的 star,它提供了適合所有現(xiàn)代 Web 瀏覽器的內(nèi)置動態(tài)主題的組件初烘,它的 API 也簡單明了涡真。
3.Keen?UI
使用 Vue 編寫的基本輕量級 UI 組件庫分俯,并受 Material Design 的啟發(fā),雖然受 Material UI 規(guī)范的啟發(fā)哆料,但?Keen-UI?并不是真正的 Material UI 庫缸剪。它不是一個CSS框架,不包括網(wǎng)格系統(tǒng)或排版風(fēng)格东亦,但有需要Javascript 的組件杏节。
4.Element
用于 Web 的 Vue.js 2.0 UI 工具包,這個使用廣泛流行的 Vue 2.0 網(wǎng)絡(luò)工具包提供了豐富的可定制組件的選擇典阵。 而且還提供了中文文檔奋渔,擁有一套完整的生態(tài)系統(tǒng),為下一個 Vue UI 庫提供了強(qiáng)有力的選擇壮啊。
5.Buefy
Buefy 基于?Bulma 和 Vue.js 的輕量級UI組件卒稳,它提供了即裝即用的輕量級組件。雖然組件選擇有限他巨,但是值得你去嘗試充坑。
使用 Vue.js 和世界上最流行的前端 CSS 庫—Bootstrap V4 在 Web 上構(gòu)建響應(yīng)式,移動優(yōu)先項(xiàng)目染突。
Bootstrap-Vue 為 Vue.js 2.4+ 提供了 Bootstrap V4 組件和最全面的網(wǎng)格系統(tǒng)的實(shí)現(xiàn)捻爷,它具有廣泛的自動化 WAI-ARIA 輔助功能標(biāo)記。
7.AT-UI
AT-UI 是一個模塊化的前端 UI 框架份企,開發(fā)基于Vue.js 的快速和強(qiáng)大的 Web 界面也榄。專門為桌面應(yīng)用程序構(gòu)建,AT-UI提供了一套 npm + webpack + babel 前端開發(fā)工作流程司志。全英文的文檔對用戶來說可能是具有有挑戰(zhàn)性的甜紫,但它提供了一個體面的干凈整潔的 UI 組件。
8.Fish-UI
Fish-UI 是 webpack 和 ES2015 協(xié)同工作的工具包骂远。 幾乎沒有文檔囚霸,這個庫有超過 35 個組件可供選擇和有一個干凈整潔的界面。
9.Quasar
這個流行的框架是包括用 Vue 構(gòu)建的幾十個 Vue.js 組件組成激才,為響應(yīng)式 Web 應(yīng)用程序和混合移動應(yīng)用程序提供的豐富功能選項(xiàng)拓型。組件是作為 Web 組件編寫的,所以它們嵌入了 HTML瘸恼,CSS 和 Javascript 代碼劣挫,只需在頁面和布局模板中標(biāo)注一個 HTML 標(biāo)記即可使用。
10.Muse?UI
Muse-UI 是 Vue.js 2.0 的一個 Material Design UI 庫东帅。 這個組件庫是中文文檔压固,對于尋求 Vue.js Material Design 的人來說,這些組件的功能是很強(qiáng)大的靠闭。
11.Vux
Vux 是一個受 WeChat 的 weUI 的啟發(fā)開發(fā)的廣受歡迎的移動應(yīng)用組件庫帐我。Vux 基于 webpack+vue-loader+vux 可以快速開發(fā)移動端頁面坎炼,配合 vux-loader 方便你在 WeUI 的基礎(chǔ)上定制需要的樣式。?vux-loader 保證了組件按需使用焚刚,因此不用擔(dān)心最終打包了整個 vux 的組件庫代碼点弯。
其他組件:
在組件和庫中,個人組件可以在awesome-vue項(xiàng)目中找到 矿咕。為了保持 UI 的一致性抢肛,避免重復(fù),避免將整個庫添加到項(xiàng)目中碳柱,還可以將Bit添加到任何庫捡絮,以便輕松快速地使用 NPM / Yarn 安裝個人組件。
無論你選擇一個庫還是使用自己的設(shè)計(jì)組件莲镣,Vue.js 似乎都是你下一個應(yīng)用程序的最好選擇福稳,它提供了一個輕松,輕量級且多功能的框架瑞侮。
來自:bitsrc