Vue JS 是一個漸進式 JavaScript 框架，用於開發單頁應用程式 (SPA) 和使用者介面。它是目前使用最廣泛的前端框架之一。
Vue 的一個有趣的功能是它能夠將網頁分解為不同的元件。透過使用 UI 元件庫，這個過程變得更加簡單。
有各種UI元件庫可以幫助您輕鬆快速地建立元件。因此，在本部落格中，我們將回顧 10 年排名前 2021 的 Vue UI 元件庫。
1.PrimeVue
PrimeVue 是一個易於使用、多功能且高效能的 Vue UI 元件庫，可協助您建立出色的使用者介面。
它擁有超過 80 個 UI 元件，完全支援 Web 內容可存取性指南 (WCAG) 和響應式設計。由於最近的更新，該庫現在完全支援 Vue 3。它還獲得了更多元件。
Primevue 最好的事情之一是其廣泛的組件。它們的範圍從表格和分頁器到精心製作的基於圖形的組織圖表，您可以使用它們來建立互動式 Vue 應用程式。它是開源的，在 Github 上擁有超過 1 顆星，在 NPM 上每週下載量為 6,983 次。
2. 驗證
Vuetify 是一個 Vue UI 函式庫，具有使用 Material Design 規格的精美手工元件。這意味著它是完全根據 Material Design 規範開發的，每個組件都經過精心設計，具有模組化、響應靈敏和高效能。
Vuetify 可讓您使用獨特的動態佈局自訂應用程序，並使用 SASS 變數來完善元件的樣式。
它還支援輔助功能指南、所有現代瀏覽器，並且與 Vue CLI-3 相容。它易於集成，並且具有許多可重複使用的 UI 元件，例如輪播、導航和卡片。 Vuetify 是開源的，在 Github 上擁有超過 29 顆星，在 NPM 上每週下載量為 319,170 次。
3.Chakra UI Vue
Chakra UI 是一個簡單的模組化且可存取的元件庫，為您提供快速輕鬆建立 Vue 應用程式的工具。
所有組件都是可存取的（嚴格遵循 WAI-ARIA 標準）、可主題化和可組合。它支援開箱即用的響應式樣式，並且與暗模式相容。
Chakra UI 還包含一組佈局元件，例如 CBox 和 CStack，可以透過傳遞 props 輕鬆設定元件的樣式。它還允許您使用 webpack 插件解決方案自動導入 Chakra UI Vue 元件。它是開源的，在 Github 上有 900 多顆星，在 NPM 上每週下載量為 331 次。
4.BootstrapVue
BootstrapVue，透過 BootstrapVue，您可以使用 Vue.js 和流行的前端 CSS 函式庫 — Bootstrap 在 Web 上建立響應式、行動優先順序和 ARIA 可存取的專案。該文件很容易理解，也很容易設定。它使前端實現更快完成。
它提供 85 多個元件、超過 45 個可用插件、多個指令和 1000 多個圖示。它還提供針對佈局和響應式設計量身定制的功能組件。您也可以使用 Nuxt.js 模組輕鬆將 BootstrapVue 整合到您的 Nuxt.js 專案中。
它的使用方式也與 bootstrap CSS 框架的使用方式相同。它在 Github 上開源，擁有約 12.9 個 star 和 1.7 個 fork。
5. 維埃薩克斯
Vuesax 是一個使用Vuejs 創建的新的UI 元件框架，可以輕鬆地創建項目，並具有獨特而令人愉悅的風格，vuesax 是從頭開始創建的，專為從前端愛好者到想要輕鬆創建可視化方法的後端的所有類型的開發人員而設計。最終用戶。每個組件的設計都是獨一無二的，並且不依賴任何視覺趨勢或設計規則，這使得用它構建的項目也獨一無二。
它提供響應式頁面以及可重複使用和可自訂的 UI 元件。使用 npm 或 CDN 也很容易上手。目前其最新版本不支援 Vue CLI 3。它在 Github 上開源，擁有約 4.9 顆星，NPM 每週下載量為 6700 次。
6.Ant Design Vue
Ant Design vue 基於 Ant Design 規範，Ant design vue 是一個 vue UI 庫，包含一組高品質的元件和演示，用於建立豐富的互動式使用者介面。
Ant-design-vue 提供了大量的 UI 元件來豐富您的 Web 應用程序，例如骨架、抽屜、統計等等。
隨著最近發布的 ant design vue 版本 2，它已更新為更快、更容易整合、更小的套件大小，並且還支援 Vue 3、新的 Composition API 文件。它還支援現代網頁瀏覽器、伺服器端渲染和電子。它在 Github 上擁有超過 13 顆星，NPM 每週下載量為 39,693 次。
7. 類星體
Quasar 是最好的 Vue UI 框架之一，它允許開發人員透過 Quasar CLI 使用適用於所有平台的同一個原始程式碼庫，並採用開箱即用的最佳實踐。它讓開發人員可以專注於應用程式的內容，而不是圍繞它的所有其他模板內容（建立系統、佈局）。它專注於遵循 Material 2.0 指南，並且擁有一個非常支持的社區。
Quasar 的特別之處之一是能夠編寫一次程式碼並同時將其部署為網站，即僅使用一個程式碼庫的行動應用程式。目前還有一個新版本處於測試階段，它將支援 vue 3 功能。它在 Github 上有大約 17.8 顆星。
8. 布菲
Buefy 是一個基於 Bulma（一個 CSS 框架）的輕量級 Vue JS UI 元件庫。 Buefy 將 Bulma 與 Vue 結合起來，幫助您使用最少的程式碼建立美觀的應用程式。它是 Bulma 介面的 javascript 層。
它可以完全導入，也可以在普通網頁上導入單一元件。將其整合到您的專案中非常容易，可以使用 npm 或 CDN 來完成。
Buefy 提供現成的 UI 元件、佈局和圖示。該元件可以將 SASS 用於您的主題。它還支援現代瀏覽器。
9.Vue材質
Vue Material 是一個廣泛使用的輕量級框架，它實現了 Material Design 規範。它是 Vue.js 和 Material Design 規範之間最好的整合之一！您可以透過簡單的 API 輕鬆配置它以滿足您的所有需求。
它與響應式設計相容並支援所有現代 Web 瀏覽器。本庫分為主題、元件和 UI 元素。主題提供了有關如何主題化您的應用程式（或編寫您自己的主題）的明確指南，而元件和 UI 元素由佈局、導航、排版、圖示和其他 30 個元件組成。它在 Github 上擁有約 9.2 個 star 和 1.1 個分支，NPM 每週下載量超過 21 次。
10. 基恩使用者介面
KeenUI 是一個輕量級的 vue.js UI 函式庫，有簡單的 API，靈感來自 Google 的 Material Design。 Keen UI 不是 CSS 框架。因此，它不包括網格系統、排版等的樣式。相反，重點是需要 Javascript 的互動式元件。
它有大約 30 個可重複使用的組件。可以透過使用 SASS 變數覆蓋樣式來自訂元件。您可以使用 CDN 或 npm 將其整合到您的專案中。它是開源的，在 Github 上有大約 4k 顆星。
結論
UI 元件庫無疑使建置專案變得更加容易。選擇合適的項目取決於您想要從事的項目的功能。在投入新專案之前，建議您先查看最適合該目的的 UI 元件庫。