2021- 九款值得推薦的 VUE3 UI 框架

本文推薦幾個比較流行的 VUE3 UI 框架，同時提供出色的開發人員體驗，合理利用，又或者學習借鑑都是不錯的選擇，排名不分先後。

Ant Design Vue

官方網站：https://2x.antdv.com/components/overview/

Ant Design Vue 是一個非常成熟的框架，使用 Ant Design Vue 創建用戶界面非常簡單，這些組件可以適應各種圖標樣式、字體和黑色主題。Ant Design Vue 不斷改進其 60 多個組件，基本覆蓋項目大部份需求，而且使它們變得更好，更易於訪問。

Vue3 上的 Ant Design 包更小，感覺更輕，並且支持 SSR（還包括組合 API），Ant Design 擁有成熟的複雜組件，如數據表、統計框、pop 確認、模態和彈出窗口。

Ant Design Vue 在 GitHub 上擁有 15k+ 顆星，每週下載量爲 49k，數據已經說明了它的受歡迎程度。

BalmUI

官方網站：https://next-material.balmjs.com/#/

BalmUI 已經發布了他們的 9.0 版本了，該版本支持 Vue3。Balm 基於谷歌的 Material Design，這就是爲什麼它看起來很熟悉。Balm 附帶 Vue 插件和指令，以及從簡單到複雜的高度可定製的組件。

BalmUI 發展非常迅速，如果想使用 Material Design 風格，使用複雜的內置指令（如 debouncing 和 UI 波紋）在創建自定義組件時能派上用場，那麼它非常適合 Vue3 項目。

Wave UI

官方網站：https://antoniandre.github.io/wave-ui/

WaveUI 在 Vue3 發佈後進行了良好的定位，WaveUI 的開發是在 Vue3 仍處於 alpha 階段時就開始了，其目標是在其 API 穩定後立即支持它，使其成爲首批 Vue3 UI 框架之一。

WaveUI 擁有 40 多個漂亮且響應迅速的組件，它們的範圍從旋轉器到日曆，以及介於兩者之間的任何東西。WaveUI 還提供實用程序、可定製性和成熟的集成表單驗證功能。

WaveUI 提供的組件非常漂亮，動畫效果也非常好，它的風格在整個框架中是一致的。企業級響應式 Vue3 應用程序不錯的選擇。

Vuestic

官方網站：https://vuestic.dev/

Vuestic 是 Vue 最漂亮的開源管理面板之一，擅長編寫可維護的 Vue 代碼，製作靈活的組件和接口。

該團隊最近發佈了 Vuestic 的 Vue3 版本，包含了流行的 Vuestic Admin UI 和更多的組件。Vuestic 強調它對鍵盤導航的開箱即用支持，由於它提供的用戶體驗，這個特性在前端社區很受歡迎。

Vuestic 提供了 50 多個具有獨特功能和廣泛可配置性的組件，應式設計，這些組件幾乎適用於所有屏幕分辨率。Vuestic 在整個框架中提供無縫翻譯支持和鍵盤可訪問性。

Vuestic 已經憑藉其漂亮的組件目錄確立了自己作爲最美觀的 Vue3 UI 框架之一的地位。他們現在正在加快步伐創建更復雜的組件，例如日期選擇器或數據表，它們肯定會像他們當前的產品一樣具有創造性。

Element+

官方網站：https://element-plus.org/#/zh-CN

Element+ 已經在 Vue2 中聲名鵲起，Element+ 爲 Vue3 帶來了大量不引人注目的組件，創建一個非常複雜的應用程序所需的大部分內容都已經制作完成並可供使用。Element+ 提供成熟的日期和時間選擇器、樹、時間線和日曆組件。

Element+ 甚至提供開發人員在構建 UI 界面時可能需要的最細微的部件，從簡單的動畫到框架範圍的國際化系統，可以與 i18n 配對使用以創建自定義翻譯，甚至添加非內置語言。

Element+ 在 GitHub 上擁有 11.1k+ 顆星，正在成爲 Github 上最受歡迎的 Vue3 UI 框架之一，它以出色的問題管理、及時更新、可插入組件和通過 SCSS 變量的高定製性達到了開發者的期望。

Ionic

官方網站：https://ionicframework.com/docs/vue/overview

Ionic 是最早提供 Vue3 支持的 UI 框架之一， Ionic 更傾向於移動 UI，團隊知道如何迎合和維護一個優秀的 UI 框架。

Ionic Vue 是一個很成熟的框架，有一個令人震驚的社區、大量的 StackOverflow 問題、企業支持和一個擁有核心成員的大型 Slack 頻道，這使得可以在需要幫助時輕鬆獲得支持。

Ionic Vue 框架在 Github 上有 45k+ 顆星，已經被很多大公司使用，包括空客（Airbus）和藝電（Electronic Arts），而 Ionic 的團隊以擅長維護他們的 UI 框架而聞名，這是現在和未來的一個很好的選擇。

Naive UI

官方網站：https://www.naiveui.com/zh-CN/os-theme

Naive UI 在 Twitter 上發佈，然後被 Vue 的創建者轉發，給這個新生的組件庫帶來了大量流量。現在，Naive UI 在不到三個月的時間裏就在 GitHub 上獲得了5.1k 顆星。

它提供了 70 多個製作精良的組件，這些組件可以無縫地融入幾乎任何類型的 Vue3 應用。Naive 的組件性能優異，可定製性極強，並支持 TypeScript，提供了很棒的開發體驗。

文檔網站易於瀏覽，並具有完整的自定義輸入，可幫助開發人員預覽組件在他們自己的主題中的外觀。可以使用這些選項來創建自己的帶有顏色圖案和字體的完整主題。這個定製的主題可以下載並輕鬆添加到應用程序中以覆蓋默認值。

Quasar

官方網站：https://next.quasar.dev/

Quasar 是一個完整的、以性能爲中心的框架，可幫助構建 Vue 用戶界面（SPA、PWA、SSR、移動和桌面），除了 Vue、Node 和 Webpack，Quasar 還包含 Cordova、Capacitor 和 Electron，它們可以幫助構建桌面和移動體驗，而無需單獨學習。

Quasar 框架似乎是基於 Material Design，但是一旦開始，一切都可以很好地定製以適應自己的設計體系。

對 Vue3 支持也很迅速，而且 Quasar 已經發布了幾乎所有的 v1 組件、插件和指令。此外，他們還發布了可組合組件，幫助開發人員更深入地瞭解 Quasar API。

PrimeVUE

官方網站：https://primefaces.org/primevue/showcase/#/setup

PrimeVUE 也算是最早支持 Vue3 的框架之一，它並沒有讓人失望。PrimeVUE 擁有 80 多個組件，證明自己是此列表中組件範圍最廣的框架之一。

組件包括帶有儀表、滑塊、樹、圖形、拆分按鈕、旋鈕、圖表等的密碼錶單。PrimeVUE 甚至還集成了一個表單驗證庫 Vuelidate。附帶了預先製作的主題，並提供了一個成熟的可視化編輯器，幫助開發人員定製自己的主題。

總結

隨着生態系統的遷移，從 Vue2 遷移到 Vue3 將變得更加容易，因此，藉助 Vue3 提供的 API 和響應性，並結合這些 UI 框架將會讓項目開發變得更好、更快、更靈活。

原文鏈接： https://my.oschina.net/lav/blog/5179117

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/trSoRsMJakRvZcMDVknrRw