2020年 16 個很有用的 Vue UI庫
本文主要跟大家分享一些 Vue 的 UI 庫,這些庫都是 github 高星的庫,廢話不多說,我們一起來看看。
1. Vuetify (⭐️ 24k)
網(wǎng)站:https://vuetifyjs.com/zh-Hans/
github: https://github.com/vuetifyjs/vuetify
Vuetify 是一個 Vue UI 庫,包含手工制作的精美材料組件。不需要設(shè)計技能 - 創(chuàng)建令人驚嘆的應(yīng)用程序所需的一切都觸手可及。Vuetify有超過100個組件元素,帶有響應(yīng)式網(wǎng)格系統(tǒng),完全支持事件處理。通過每周的補丁和持續(xù)的更新,Vuetify 很可能在未來幾年內(nèi)仍然是很受歡迎的Vue庫之一。

2. Vue Material (⭐️ 8587)
網(wǎng)站: https://vuematerial.io/
github: https://github.com/vuematerial/vue-material
Vue Material 是一個輕量級的框架, 建立在谷歌的 Material Design 基礎(chǔ)上。設(shè)計強大的和美觀的web應(yīng)用并適用于不同的屏幕。我們可以動態(tài)地生成和使用主題,根據(jù)自己的需求只用組件,UI元素與組件的優(yōu)勢在于可以更簡單的使用API和其他的。Vue Material 的目的是提供一組可重用的組件和一系列的UI元素,使用 Vue 2.0 建立支持 主流的瀏覽器 的應(yīng)用。
3. Element UI (⭐️ 44k)
網(wǎng)站: https://element.eleme.io/#/zh-CN/resource
這個就不多說,國內(nèi)前端開發(fā)基本都知道的,強大好用的 Vue UI 庫。
4. Buefy (⭐️ 7.1k)
網(wǎng)站: https://buefy.org/
github: https://github.com/buefy/buefy
如果我們希望為項目提供一個更簡單且輕量的UI庫,那么這個基于bulma的輕量級工具是一個很好的選擇。雖然它的組件比列表中的其他庫要少,但這也是它的優(yōu)點之一。保持Buefy輕量級,并且只保留最重要的組件,如下拉菜單、表單等,對于只想為幾個關(guān)鍵組件使用庫的開發(fā)人員來說,這是最好的選擇之一。

5. Quasar Framework (⭐️ 13.8k)
網(wǎng)站: http://www.quasarchs.com/
github: https://github.com/buefy/buefy
Quasar允許開發(fā)人員編寫一次代碼,并且使用相同的代碼庫同時部署為網(wǎng)站、PWA、Mobile App和Electron App。使用最先進(jìn)的CLI設(shè)計應(yīng)用程序,并提供精心編寫,速度非??斓腝uasar Web組件。
當(dāng)使用Quasar時,你不需要像Hammerjs,Momentjs或Bootstrap這樣的額外重型庫。它擁有這些功能,而且體積很小!

6. VueStrap (⭐️ 4.8k)
網(wǎng)站: http://yuche.github.io/vue-strap/
github: https://github.com/yuche/vue-strap
接下來的兩個庫都是使用VueJS實現(xiàn)類似Bootstrap組件的兩種方式。VueStrap接受Bootstrap中發(fā)現(xiàn)的所有元素,并具有可以輕松導(dǎo)入和呈現(xiàn)的等效Vue組件。

7. Bootstrap Vue (⭐️ 10.9k)
網(wǎng)站: https://bootstrap-vue.js.org/
github: https://github.com/bootstrap-vue/bootstrap-vue
最近,Vue.js 生態(tài)系統(tǒng)發(fā)布了一個新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個包稱為 BootstrapVue。它允許我們使用與 Bootstrap(v4)集成的自定義組件。它還支持自定義 Bootstrap 組件、網(wǎng)格系統(tǒng),還支持 Vue.js 指令。

8. UIV (⭐️ 813)
網(wǎng)站: https://uiv.wxsm.space/
github: https://github.com/wxsms/uiv
Bootstrap和Vue之間的又一個集成。盡管我對UIV的了解還不足以直接將其與前兩個庫進(jìn)行比較,但需要注意一些關(guān)鍵事項。UIV使用Bootstrap CSS作為依賴項,從而使庫本身輕量級化,并且根據(jù)其文檔,它支持SSR(服務(wù)器端渲染)。

9. Mint UI (⭐️ 15.5k)
網(wǎng)站: http://mint-ui.github.io/#!/zh-cn
github: https://github.com/ElemeFE/mint-ui/
Mint UI 包含豐富的 CSS 和 JS 組件,能夠滿足日常的移動端開發(fā)需要。通過它,可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率。真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件,無需再糾結(jié)文件體積過大。ue.js 高效的組件化方案,Mint UI 做到了輕量化。即使全部引入,壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。

10. Vuecidity
網(wǎng)站: https://vuecidity.wemakesites.net/
Vuecidity是基于Material Design的VueJS組件庫。通過表單元素,指令,布局選項和UI組件,Vuecidity幾乎涵蓋了所有基礎(chǔ)。通過支持 Material Designs 主題,Vuecidity 作為 Vue版本,非常適合那些對Material Design感到滿意的開發(fā)人員。

11. iView (⭐️ 23.1)
網(wǎng)站: https://www.iviewui.com/
github: https://github.com/iview/iview
iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務(wù)于 PC 界面的中后臺產(chǎn)品,其特性包括:高質(zhì)量、功能豐富友好的 API ,自由靈活地使用空間,細(xì)致、漂亮的 UI,事無巨細(xì)的文檔和可自定義主題。

12. DeepReader (⭐️ 87)
github: https://github.com/deep-philology/DeepReader
這個模塊化框架可能沒有其他庫那么廣泛的用例,但是它的功能太酷了,所以還是要介紹的。DeepReader構(gòu)建了在線閱讀環(huán)境,并帶有可以添加注釋,小部件和不同工具的不同組件,以創(chuàng)建完整的學(xué)習(xí)/閱讀環(huán)境。

13. KeenUI (⭐️ 3.9k )
網(wǎng)站:https://josephuspaye.github.io/Keen-UI/#/ui-alert
github: https://github.com/JosephusPaye/Keen-UI
KeenUI 使用 Vue 編寫的基本輕量級 UI 組件庫,并受 Material Design 的啟發(fā),雖然受 Material UI 規(guī)范的啟發(fā),但 Keen-UI 并不是真正的 Material UI 庫。它不是一個CSS框架,不包括網(wǎng)格系統(tǒng)或排版風(fēng)格,但有需要Javascript 的組件。

14. AT UI (⭐️ 1795)
網(wǎng)站:https://aotu.io/notes/2017/08/28/at-ui/
github: https://github.com/aliqin/atui
AT UI專為前端Web應(yīng)用程序而構(gòu)建。具備使用CSS預(yù)處理程序的能力,它幾乎適用于幾乎所有開發(fā)團(tuán)隊。就我個人而言,我真的很喜歡AT UI隨附的最小樣式和字體選擇,而且我認(rèn)為添加到任何項目中都非常直觀且容易。與其他庫相比,它的內(nèi)置圖標(biāo)庫(Feather)也是一個巨大的好處。

15. Muse-UI (⭐️ 7084)
網(wǎng)站: https://muse-ui.org/#/en-US
github: https://github.com/museui/muse-ui
Muse UI 基于 Vue2.0 開發(fā),Vue2.0是當(dāng)下最快的前端框架之一,小巧,api友好,可用于開發(fā)的復(fù)雜單頁應(yīng)用。Muse UI是一個受Material Design啟發(fā)的庫,不僅包含我們所期望的所有核心Web組件,而且還包括一些移動組件,例如對話框,滑塊和響應(yīng)式刷新按鈕。

16 Vue Blu (⭐️ 1.5k)
網(wǎng)站: https://chenz24.github.io/vue-blu/#/
github: https://github.com/chenz24/vue-blu
像Buefy一樣,Vue Blu是Vue和Bulma之間的集成。它非常有用且輕巧,并且與NPM,Webpack和Babel堆棧具有很好的集成。它具有強大的布爾瑪集成度,并充分利用了Flexbox功能。我最喜歡的組件之一是時間線,可以輕松創(chuàng)建漂亮的時間線,非常適合進(jìn)行項目更新。

好了,今天就分享到這里,你最喜歡的Vue.js庫是什么?