本文推薦幾個(gè)比較流行的VUE3 UI框架,同時(shí)提供出色的開發(fā)人員體驗(yàn),合理利用,又或者學(xué)習(xí)借鑒都是不錯(cuò)的選擇,排名不分先后。Ant Design Vue
官方網(wǎng)站:https://2x.antdv.com/components/overview/Ant Design Vue 是一個(gè)非常成熟的框架,使用 Ant Design Vue 創(chuàng)建用戶界面非常簡單,這些組件可以適應(yīng)各種圖標(biāo)樣式、字體和黑色主題。Ant Design Vue 不斷改進(jìn)其60多個(gè)組件,基本覆蓋項(xiàng)目大部份需求,而且使它們變得更好,更易于訪問。
Vue3 上的 Ant Design 包更小,感覺更輕,并且支持 SSR(還包括組合API),Ant Design 擁有成熟的復(fù)雜組件,如數(shù)據(jù)表、統(tǒng)計(jì)框、pop確認(rèn)、模態(tài)和彈出窗口。Ant Design Vue 在 GitHub 上擁有 15k+ 顆星,每周下載量為 49k,數(shù)據(jù)已經(jīng)說明了它的受歡迎程度。BalmUI
官方網(wǎng)站:https://next-material.balmjs.com/#/BalmUI 已經(jīng)發(fā)布了他們的 9.0 版本了,該版本支持Vue3。Balm 基于谷歌的 Material Design,這就是為什么它看起來很熟悉。Balm 附帶 Vue 插件和指令,以及從簡單到復(fù)雜的高度可定制的組件。
BalmUI 發(fā)展非常迅速,如果想使用 Material Design 風(fēng)格,使用復(fù)雜的內(nèi)置指令(如 debouncing 和 UI 波紋)在創(chuàng)建自定義組件時(shí)能派上用場,那么它非常適合 Vue3 項(xiàng)目。Wave UI
官方網(wǎng)站:https://antoniandre.github.io/wave-ui/WaveUI 在Vue3 發(fā)布后進(jìn)行了良好的定位,WaveUI 的開發(fā)是在 Vue3 仍處于alpha階段時(shí)就開始了,其目標(biāo)是在其API穩(wěn)定后立即支持它,使其成為首批 Vue3 UI框架之一。
WaveUI 擁有40多個(gè)漂亮且響應(yīng)迅速的組件,它們的范圍從旋轉(zhuǎn)器到日歷,以及介于兩者之間的任何東西。WaveUI 還提供實(shí)用程序、可定制性和成熟的集成表單驗(yàn)證功能。WaveUI 提供的組件非常漂亮,動(dòng)畫效果也非常好,它的風(fēng)格在整個(gè)框架中是一致的。企業(yè)級(jí)響應(yīng)式 Vue3 應(yīng)用程序不錯(cuò)的選擇。Vuestic
官方網(wǎng)站:https://vuestic.dev/Vuestic 是 Vue 最漂亮的開源管理面板之一,擅長編寫可維護(hù)的 Vue 代碼,制作靈活的組件和接口。
該團(tuán)隊(duì)最近發(fā)布了 Vuestic 的 Vue3版本,包含了流行的 Vuestic Admin UI 和更多的組件。Vuestic 強(qiáng)調(diào)它對(duì)鍵盤導(dǎo)航的開箱即用支持,由于它提供的用戶體驗(yàn),這個(gè)特性在前端社區(qū)很受歡迎。Vuestic 提供了 50 多個(gè)具有獨(dú)特功能和廣泛可配置性的組件,應(yīng)式設(shè)計(jì),這些組件幾乎適用于所有屏幕分辨率。Vuestic 在整個(gè)框架中提供無縫翻譯支持和鍵盤可訪問性。Vuestic 已經(jīng)憑借其漂亮的組件目錄確立了自己作為最美觀的 Vue3 UI 框架之一的地位。他們現(xiàn)在正在加快步伐創(chuàng)建更復(fù)雜的組件,例如日期選擇器或數(shù)據(jù)表,它們肯定會(huì)像他們當(dāng)前的產(chǎn)品一樣具有創(chuàng)造性。Element+
官方網(wǎng)站:https://element-plus.org/#/zh-CNElement+ 已經(jīng)在 Vue2 中聲名鵲起,Element+ 為 Vue3 帶來了大量不引人注目的組件,創(chuàng)建一個(gè)非常復(fù)雜的應(yīng)用程序所需的大部分內(nèi)容都已經(jīng)制作完成并可供使用。Element+提供成熟的日期和時(shí)間選擇器、樹、時(shí)間線和日歷組件。
Element+ 甚至提供開發(fā)人員在構(gòu)建 UI 界面時(shí)可能需要的最細(xì)微的部件,從簡單的動(dòng)畫到框架范圍的國際化系統(tǒng),可以與 i18n 配對(duì)使用以創(chuàng)建自定義翻譯,甚至添加非內(nèi)置語言。Element+ 在 GitHub 上擁有 11.1k+ 顆星,正在成為 Github 上最受歡迎的 Vue3 UI 框架之一,它以出色的問題管理、及時(shí)更新、可插入組件和通過SCSS變量的高定制性達(dá)到了開發(fā)者的期望。Ionic
官方網(wǎng)站:https://ionicframework.com/docs/vue/overviewIonic 是最早提供 Vue3 支持的 UI 框架之一, Ionic 更傾向于移動(dòng) UI,團(tuán)隊(duì)知道如何迎合和維護(hù)一個(gè)優(yōu)秀的 UI 框架。
Ionic Vue 是一個(gè)很成熟的框架,有一個(gè)令人震驚的社區(qū)、大量的 StackOverflow 問題、企業(yè)支持和一個(gè)擁有核心成員的大型 Slack 頻道,這使得可以在需要幫助時(shí)輕松獲得支持。Ionic Vue 框架在 Github上有 45k+ 顆星,已經(jīng)被很多大公司使用,包括空客(Airbus)和藝電(Electronic Arts),而 Ionic 的團(tuán)隊(duì)以擅長維護(hù)他們的UI框架而聞名,這是現(xiàn)在和未來的一個(gè)很好的選擇。Naive UI
官方網(wǎng)站:https://www.naiveui.com/zh-CN/os-themeNaive UI 在 Twitter 上發(fā)布,然后被 Vue 的創(chuàng)建者轉(zhuǎn)發(fā),給這個(gè)新生的組件庫帶來了大量流量。現(xiàn)在,Naive UI 在不到三個(gè)月的時(shí)間里就在 GitHub 上獲得了5.1k 顆星。
它提供了70多個(gè)制作精良的組件,這些組件可以無縫地融入幾乎任何類型的 Vue3應(yīng)用。Naive的組件性能優(yōu)異,可定制性極強(qiáng),并支持 TypeScript,提供了很棒的開發(fā)體驗(yàn)。文檔網(wǎng)站易于瀏覽,并具有完整的自定義輸入,可幫助開發(fā)人員預(yù)覽組件在他們自己的主題中的外觀。可以使用這些選項(xiàng)來創(chuàng)建自己的帶有顏色圖案和字體的完整主題。這個(gè)定制的主題可以下載并輕松添加到應(yīng)用程序中以覆蓋默認(rèn)值。Quasar
官方網(wǎng)站:https://next.quasar.dev/Quasar 是一個(gè)完整的、以性能為中心的框架,可幫助構(gòu)建 Vue 用戶界面(SPA、PWA、SSR、移動(dòng)和桌面),除了 Vue、Node 和 Webpack,Quasar 還包含 Cordova、Capacitor 和 Electron,它們可以幫助構(gòu)建桌面和移動(dòng)體驗(yàn),而無需單獨(dú)學(xué)習(xí)。
Quasar 框架似乎是基于 Material Design,但是一旦開始,一切都可以很好地定制以適應(yīng)自己的設(shè)計(jì)體系。對(duì) Vue3 支持也很迅速,而且 Quasar 已經(jīng)發(fā)布了幾乎所有的 v1 組件、插件和指令。此外,他們還發(fā)布了可組合組件,幫助開發(fā)人員更深入地了解 Quasar API。PrimeVUE
官方網(wǎng)站:https://primefaces.org/primevue/showcase/#/setupPrimeVUE 也算是最早支持 Vue3 的框架之一,它并沒有讓人失望。PrimeVUE 擁有 80 多個(gè)組件,證明自己是此列表中組件范圍最廣的框架之一。
組件包括帶有儀表、滑塊、樹、圖形、拆分按鈕、旋鈕、圖表等的密碼表單。PrimeVUE 甚至還集成了一個(gè)表單驗(yàn)證庫 Vuelidate。附帶了預(yù)先制作的主題,并提供了一個(gè)成熟的可視化編輯器,幫助開發(fā)人員定制自己的主題。總結(jié)
隨著生態(tài)系統(tǒng)的遷移,從 Vue2 遷移到 Vue3 將變得更加容易,因此,借助 Vue3 提供的API和響應(yīng)性,并結(jié)合這些 UI 框架將會(huì)讓項(xiàng)目開發(fā)變得更好、更快、更靈活。原文鏈接:https://my.oschina.net/lav/blog/5179117
逆鋒起筆是一個(gè)專注于程序員圈子的技術(shù)平臺(tái),你可以收獲最新技術(shù)動(dòng)態(tài)、最新內(nèi)測資格、BAT等大廠大佬的經(jīng)驗(yàn)、增長自身、學(xué)習(xí)資料、職業(yè)路線、賺錢思維,微信搜索逆鋒起筆關(guān)注!
Vue 實(shí)現(xiàn)數(shù)組四級(jí)聯(lián)動(dòng)
Vue 項(xiàng)目打包部署總結(jié)
Vue3.0 七大亮點(diǎn)是什么??
一名 Vue 程序員總結(jié)的 React 基礎(chǔ)
Vue 實(shí)戰(zhàn)中的一些小魔法