2020年 16 個最有用的 Vue UI庫

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

本文主要跟你們分享一些 Vue 的 UI 庫，這些庫都是 github 高星的庫，廢話很少說，咱們一直來看看。

1. Vuetify (⭐️ 24k)

網站：https://vuetifyjs.com/zh-Hans/
github： https://github.com/vuetifyjs/...

Vuetify 是一個 Vue UI 庫，包含手工製做的精美材料組件。不須要設計技能 - 建立使人驚歎的應用程序所需的一切都觸手可及。Vuetify有超過100個組件元素，帶有響應式網格系統，徹底支持事件處理。經過每週的補丁和持續的更新，Vuetify 極可能在將來幾年內仍然是最受歡迎的Vue庫之一。

2. Vue Material (⭐️ 8587)

網站： https://vuematerial.io/
github： https://github.com/vuemateria...

Vue Material 是一個輕量級的框架， 創建在谷歌的 Material Design 基礎上。 設計強大的和美觀的web應用並適用於不一樣的屏幕。咱們能夠動態地生成和使用主題，根據本身的需求只用組件，UI元素與組件的優點在於能夠更簡單的使用API和其餘的。Vue Material 的目的是提供一組可重用的組件和一系列的UI元素，使用 Vue 2.0 創建支持 主流的瀏覽器 的應用。

3. Element UI (⭐️ 44k)

網站： https://element.eleme.io/#/zh...

這個就很少說，國內前端開發基本都知道的，強大好用的 Vue UI 庫。

4. Buefy (⭐️ 7.1k)

網站： https://buefy.org/
github： https://github.com/buefy/buefy

若是咱們但願爲項目提供一個更簡單且輕量的UI庫，那麼這個基於bulma的輕量級工具是一個很好的選擇。雖然它的組件比列表中的其餘庫要少，但這也是它的優勢之一。保持Buefy輕量級，而且只保留最重要的組件，以下拉菜單、表單等，對於只想爲幾個關鍵組件使用庫的開發人員來講，這是最好的選擇之一。

5. Quasar Framework (⭐️ 13.8k)

網站： http://www.quasarchs.com/
github： https://github.com/buefy/buefy

Quasar容許開發人員編寫一次代碼，而且使用相同的代碼庫同時部署爲網站、PWA、Mobile App和Electron App。使用最早進的CLI設計應用程序，並提供精心編寫，速度很是快的Quasar Web組件。

當使用Quasar時，你不須要像Hammerjs，Momentjs或Bootstrap這樣的額外重型庫。它擁有這些功能，並且體積很小！

6. VueStrap (⭐️ 4.8k)

網站： http://yuche.github.io/vue-st...
github： https://github.com/yuche/vue-...

接下來的兩個庫都是使用VueJS實現相似Bootstrap組件的兩種方式。 VueStrap接受Bootstrap中發現的全部元素，並具備能夠輕鬆導入和呈現的等效Vue組件。

7. Bootstrap Vue (⭐️ 10.9k)

網站： https://bootstrap-vue.js.org/
github： https://github.com/bootstrap-...

最近，Vue.js 生態系統發佈了一個新的軟件包。它是流行的 Bootstrap 框架與 Vue.js 的集成。這個包稱爲 BootstrapVue。它容許咱們使用與 Bootstrap（v4）集成的自定義組件。
它還支持自定義 Bootstrap 組件、網格系統，還支持 Vue.js 指令。

8. UIV (⭐️ 813)

網站： https://uiv.wxsm.space/
github： https://github.com/wxsms/uiv

Bootstrap和Vue之間的又一個集成。 儘管我對UIV的瞭解還不足以直接將其與前兩個庫進行比較，但須要注意一些關鍵事項。 UIV使用Bootstrap CSS做爲依賴項，從而使庫自己輕量級化，而且根據其文檔，它支持SSR（服務器端渲染）。

9. Mint UI (⭐️ 15.5k)

網站： http://mint-ui.github.io/#!/z...
github： https://github.com/ElemeFE/mi...

Mint UI 包含豐富的 CSS 和 JS 組件，可以知足平常的移動端開發須要。經過它，能夠快速構建出風格統一的頁面，提高開發效率。真正意義上的按需加載組件。能夠只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。ue.js 高效的組件化方案，Mint UI 作到了輕量化。即便所有引入，壓縮後的文件體積也僅有 ~30kb (JS + CSS) gzip。

10. Vuecidity

網站： https://vuecidity.wemakesites...

Vuecidity是基於Material Design的VueJS組件庫。 經過表單元素，指令，佈局選項和UI組件，Vuecidity幾乎涵蓋了全部基礎。 經過支持 Material Designs 主題，Vuecidity 做爲 Vue版本，很是適合那些對Material Design感到滿意的開發人員。

11. iView (⭐️ 23.1)

網站： https://www.iviewui.com/
github： https://github.com/iview/iview

iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品，其特性包括：高質量、功能豐富友好的 API ，自由靈活地使用空間，細緻、漂亮的 UI，事無鉅細的文檔和可自定義主題。

12. DeepReader (⭐️ 87)

github： https://github.com/deep-philo...

這個模塊化框架可能沒有其餘庫那麼普遍的用例，可是它的功能太酷了，因此仍是要介紹五。 DeepReader構建了在線閱讀環境，並帶有能夠添加註釋，小部件和不一樣工具的不一樣組件，以建立完整的學習/閱讀環境。

13. KeenUI (⭐️ 3.9k )

網站：https://josephuspaye.github.i...
github： https://github.com/JosephusPa...

KeenUI 使用 Vue 編寫的基本輕量級 UI 組件庫，並受 Material Design 的啓發，雖然受 Material UI 規範的啓發，但 Keen-UI 並非真正的 Material UI 庫。它不是一個CSS框架，不包括網格系統或排版風格，但有須要Javascript 的組件。

14. AT UI (⭐️ 1795)

網站：https://aotu.io/notes/2017/08...
github： https://github.com/aliqin/atui

AT UI專爲前端Web應用程序而構建。 具有使用CSS預處理程序的能力，它幾乎適用於幾乎全部開發團隊。 就我我的而言，我真的很喜歡AT UI隨附的最小樣式和字體選擇，並且我認爲添加到任何項目中都很是直觀且容易。 與其餘庫相比，它的內置圖標庫（Feather）也是一個巨大的好處。

15. Muse-UI (⭐️ 7084)

網站： https://muse-ui.org/#/en-US
github： https://github.com/museui/mus...

Muse UI 基於 Vue2.0 開發，Vue2.0是當下最快的前端框架之一，小巧，api友好，可用於開發的複雜單頁應用。Muse UI是一個受Material Design啓發的庫，不只包含咱們所指望的全部核心Web組件，並且還包括一些移動組件，例如對話框，滑塊和響應式刷新按鈕。

16 Vue Blu (⭐️ 1.5k)

網站： https://chenz24.github.io/vue...
github： https://github.com/chenz24/vu...

像Buefy同樣，Vue Blu是Vue和Bulma之間的集成。 它很是有用且輕巧，而且與NPM，Webpack和Babel堆棧具備很好的集成。 它具備強大的布爾瑪集成度，並充分利用了Flexbox功能。 我最喜歡的組件之一是時間線，能夠輕鬆建立漂亮的時間線，很是適合進行項目更新。

好了，今天就分享到這裏，你最喜歡的Vue.js庫是什麼？歡迎留言討論。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：
https://levelup.gitconnected....

做者：Matt Maribojoc 譯者：前端小智 來源：medium

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。