天天看點

2021年最佳VUE3 UI架構推薦

2021年最佳VUE3 UI架構推薦

Vue3已經釋出一段時間了,版本趨于穩定并且可以用于生産。雖然很多開發人員對這個版本褒獎不一,新版本由于算是重新建構生态系統,相關資源的缺乏。與Vue2豐富的UI架構相比,Vue3就顯得有點少,也算是影響開發人員使用Vue3的原因之一。

在Vue中使用UI架構是一個很好的組合,因為它使開發人員更加專注抽象通用元件,進而提供了一個可維護的、高效的開發過程。本文推薦幾個比較流行的VUE3 UI架構,同時提供出色的開發人員體驗,合理利用,又或者學習借鑒都是不錯的選擇,排名不分先後。

Ant Design Vue

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

Ant Design Vue 是一個非常成熟的架構,使用 Ant Design Vue 建立使用者界面非常簡單,這些元件可以适應各種圖示樣式、字型和黑色主題。Ant Design Vue 不斷改進其60多個元件,基本覆寫項目大部份需求,而且使它們變得更好,更易于通路。

2021年最佳VUE3 UI架構推薦

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 插件和指令,以及從簡單到複雜的高度可定制的元件。

2021年最佳VUE3 UI架構推薦

BalmUI 發展非常迅速,如果想使用 Material Design 風格,使用複雜的内置指令(如

debouncing

和 UI 波紋)在建立自定義元件時能派上用場,那麼它非常适合 Vue3 項目。

Wave UI

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

WaveUI 在Vue3 釋出後進行了良好的定位,WaveUI 的開發是在 Vue3 仍處于alpha階段時就開始了,其目标是在其API穩定後立即支援它,使其成為首批 Vue3 UI架構之一。

2021年最佳VUE3 UI架構推薦

WaveUI 擁有40多個漂亮且響應迅速的元件,它們的範圍從旋轉器到月曆,以及介于兩者之間的任何東西。WaveUI 還提供實用程式、可定制性和成熟的內建表單驗證功能。

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

Vuestic

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

Vuestic 是 Vue 最漂亮的開源管理面闆之一,擅長編寫可維護的 Vue 代碼,制作靈活的元件和接口。

2021年最佳VUE3 UI架構推薦

該團隊最近釋出了 Vuestic 的 Vue3版本,包含了流行的

Vuestic Admin UI

和更多的元件。Vuestic 強調它對鍵盤導航的開箱即用支援,由于它提供的使用者體驗,這個特性在前端社群很受歡迎。

Vuestic 提供了 50 多個具有獨特功能和廣泛可配置性的元件,應式設計,這些元件幾乎适用于所有螢幕分辨率。 Vuestic 在整個架構中提供無縫翻譯支援和鍵盤可通路性。

Vuestic 已經憑借其漂亮的元件目錄确立了自己作為最美觀的 Vue3 UI 架構之一的地位。他們現在正在加快步伐建立更複雜的元件,例如日期選擇器或資料表,它們肯定會像他們目前的産品一樣具有創造性。

Element+

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

Element+ 已經在 Vue2 中聲名鵲起,

Element+

為 Vue3 帶來了大量不引人注目的元件,建立一個非常複雜的應用程式所需的大部分内容都已經制作完成并可供使用。

Element+

提供成熟的日期和時間選擇器、樹、時間線和月曆元件。

2021年最佳VUE3 UI架構推薦

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

Element+ 在 GitHub 上擁有

11.1k+

顆星,正在成為 Github 上最受歡迎的 Vue3 UI 架構之一,它以出色的問題管理、及時更新、可插入元件和通過SCSS變量的高定制性達到了開發者的期望。

Ionic

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

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

2021年最佳VUE3 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

顆星。

2021年最佳VUE3 UI架構推薦

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

文檔網站易于浏覽,并具有完整的自定義輸入,可幫助開發人員預覽元件在他們自己的主題中的外觀。可以使用這些選項來建立自己的帶有顔色圖案和字型的完整主題。這個定制的主題可以下載下傳并輕松添加到應用程式中以覆寫預設值。

Quasar

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

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

2021年最佳VUE3 UI架構推薦

Quasar 架構似乎是基于 Material Design,但是一旦開始,一切都可以很好地定制以适應自己的設計體系。

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

PrimeVUE

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

PrimeVUE 也算是最早支援 Vue3 的架構之一,它并沒有讓人失望。 PrimeVUE 擁有 80 多個元件,證明自己是此清單中元件範圍最廣的架構之一。

總結