Vue JS is in foarútstribjend JavaSkript-ramt dat wurdt brûkt om applikaasjes op ien side (SPA's) en brûkersynterfaces te ûntwikkeljen. En it is ien fan 'e meast brûkte front-end-frames dy't der binne.
Ien nijsgjirrige eigenskip fan Vue is har fermogen om in webside yn ferskate komponinten op te brekken. En dit proses wurdt ienfâldiger mei it brûken fan UI-komponintbiblioteken.
D'r binne ferskate UI-komponintbiblioteken dy't jo kinne helpe jo komponinten maklik en fluch te meitsjen. Dat yn dit blog sille wy de top 10 Vue UI Component Libraries foar 2021 besjen.
1. PrimeVue
PrimeVue is in ienfâldich te brûken, alsidige en performante Vue UI Component Library dy't jo helpt by it bouwen fan bjusterbaarlike brûkersynterfaces.
It hat mear as 80+ UI-komponinten mei folsleine stipe foar Web Content Accessibility Guidelines (WCAG) en responsyf ûntwerp. En tank oan in resinte update, de bibleteek hat no folsleine stipe foar Vue 3. It krige ek in bosk mear komponinten.
Ien fan 'e bêste dingen oer Primevue is har breed oanbod fan komponinten. Se fariearje fan tabellen en paginators oant goed makke op grafyk basearre organisaasjekaarten dy't jo kinne brûke om ynteraktive Vue-apps te meitsjen. It is iepen boarne en hat 1k+ stjerren op Github en 6,983 wyklikse downloads op NPM.
2. Vuetify
Vuetify is in Vue UI-bibleteek mei prachtich mei de hân makke komponinten dy't de spesifikaasje fan Material Design brûkt. Dit betsjut dat it krekt is ûntwikkele neffens de spesifikaasjes foar materiaalûntwerp mei elke komponint sekuer makke om modulêr, responsyf en performant te wêzen.
Vuetify lit jo jo applikaasjes oanpasse mei unike en dynamyske yndielingen en de stilen fan jo komponinten perfeksjonearje mei SASS-fariabelen.
It stipet ek rjochtlinen foar tagonklikens, alle moderne browsers, en is kompatibel mei Vue CLI-3. It is maklik te yntegrearjen en hat in protte werbrûkbere UI-komponinten lykas karrousels, navigaasjes en kaarten. Vuetify is iepen boarne en mei mear dan 29k stjerren op Github en 319,170 wyklikse downloads op NPM.
3. Chakra UI Vue
Chakra UI is in ienfâldige modulêre en tagonklike komponintbibleteek dy't jo de ark jout om Vue-applikaasjes fluch en maklik te bouwen.
Alle komponinten binne tagonklik (it folget strikt WAI-ARIA-standerts), temaber en komponibel. It stipet responsive stilen út 'e doaze en is kompatibel mei donkere modus.
Chakra UI befettet ek in set layoutkomponinten lykas CBox en CStack dy't it maklik meitsje om jo komponinten te stylearjen troch props troch te jaan. It lit jo ek Chakra UI Vue-komponinten automatysk ymportearje mei in webpack-plugin-oplossing. It is iepen boarne en hat 900+ stjerren op Github en 331 wyklikse downloads op NPM.
4. Bootstrap Vue
BootstrapVue, Mei BootstrapVue kinne jo op it web responsive, mobyl-earst en ARIA tagonklike projekten bouwe mei Vue.js en de populêre front-end CSS-bibleteek - Bootstrap. De dokumintaasje is maklik te begripen en it is ek maklik yn te stellen. It makket front-end ymplemintaasjes rapper dien.
It biedt 85+ komponinten, mear as 45 beskikbere plugins, ferskate rjochtlinen, en 1000+ ikoanen. It leveret ek funksjonele komponinten op maat foar yndielingen en responsyf ûntwerp. jo kinne BootstrapVue ek maklik yntegrearje yn jo Nuxt.js-projekten mei de Nuxt.js-module.
It wurdt ek brûkt op deselde manier as it bootstrap CSS-ramt wurdt brûkt. It is iepen boarne op Github mei sawat 12.9k stjerren en 1.7k foarken.
5. Vuesax
Vuesax is in nij UI-komponint-kader makke mei Vuejs om projekten maklik en mei in unike en noflike styl te meitsjen, vuesax is fanôf it begjin makke en ûntworpen foar alle soarten ûntwikkelders fan 'e frontend-leafhawwer oant de backend dy't har fisuele oanpak maklik meitsje wolle de ein-brûker. De ûntwerpen binne unyk foar elke komponint en binne net ferankere oan fisuele trends of ûntwerpregels, wêrtroch projekten dy't dêrmei boud binne ek unyk binne.
it biedt responsive siden en werbrûkbere en oanpasbere UI-komponinten. It is ek maklik om te begjinnen mei it brûken fan npm of CDN. It stipet op it stuit gjin Vue CLI 3 yn syn resinte ferzje. It is iepen boarne op Github mei sawat 4.9k stjerren en 6700 wyklikse downloads NPM.
6. Ant Design Vue
Ant Design vue basearre op de Ant Design-spesifikaasje, Ant design vue is in vue UI-bibleteek dy't in set fan komponinten en demo's fan hege kwaliteit befettet foar it bouwen fan rike, ynteraktive brûkersynterfaces.
Ant-design-vue biedt in soad UI-komponinten om jo webapplikaasjes te ferrykjen lykas Skeleton, drawer, statistiken en sa folle mear.
Mei de resinte frijlitting fan ant design vue ferzje 2, it is bywurke te wêzen flugger en makliker te yntegrearjen, lytsere bondel grutte, en ek stipet Vue 3, New Composition API dokumint. It stipet ek moderne webbrowsers, server-side Rendering, en elektron. It hat mear dan 13k stjerren op Github en op 39,693 wyklikse downloads NPM.
7. Kwasar
Quasar is ien fan 'e bêste Vue UI-ramten wêrmei ûntwikkelders ien boarnekoadebasis kinne brûke foar alle platfoarms fia Quasar CLI mei de bêste praktiken bûten it fak. It lit ûntwikkelders konsintrearje op de ynhâld fan har App ynstee fan alle oare boilerplattingsguod (bouwsysteem, yndieling) der omhinne. it is rjochte op it folgjen fan 'e Material 2.0-rjochtlinen en hat ek in heul stypjende mienskip.
Ien fan 'e spesjale dingen oer Quasar is de mooglikheid om ien kear koade te skriuwen en tagelyk yn te setten as in webside, in mobile app mei mar ien koadebase. D'r is ek in nije ferzje op it stuit yn beta dy't vue 3-funksjes soe stypje. It hat sawat 17.8k stjerren op Github.
8. Buefy
Buefy is in lichtgewicht UI-komponintbibleteek foar Vue JS basearre op Bulma (in CSS-ramt). Buefy kombineart Bulma mei Vue, en helpt jo moaie applikaasjes te bouwen mei minimale koade. it is de javascript-laach foar jo Bulma-ynterface.
It kin folslein ymportearre wurde as inkele komponinten op in gewoane webside. It yntegrearjen yn jo projekt is frij maklik, kin dien wurde mei npm of CDN.
Buefy leveret klearmakke UI-komponinten, yndieling en ikoanen. De komponinten kinne SASS brûke foar jo tema. It stipet ek moderne browsers.
9. Vue Materiaal
Vue Material is in breed brûkt, lichtgewicht ramt dat de spesifikaasjes fan Material Design ymplementearret. It is ien fan de bêste yntegraasje tusken Vue.js en Material Design specs! Jo kinne it maklik ynstelle om oan al jo behoeften te passen fia in maklike API.
It is kompatibel mei responsyf ûntwerp en stipe foar alle moderne webbrowsers. De bibleteek is ferdield yn tema's, komponinten en UI-eleminten. De tema's jouwe in definitive hantlieding oer hoe't jo jo applikaasje tematearje (of jo eigen tema's skriuwe) en de komponinten en UI-eleminten besteane út yndielingen, navigaasje, typografy, ikoanen en 30 oare komponinten. It hat sawat 9.2k stjerren en 1.1k foarken op Github en 21k + wyklikse downloads NPM.
10. KeenUI
KeenUI is in lichtgewicht vue.js UI-bibleteek mei in ienfâldige API, ynspireare troch Google's Material Design. Keen UI is gjin CSS-ramt. Dêrom befettet it gjin stilen foar in rastersysteem, typografy, ensfh. Ynstee leit de fokus op ynteraktive komponinten dy't Javascript nedich binne.
It hat sawat 30 werbrûkbere komponinten. De komponinten binne oanpasber troch de stilen te oerskriuwen mei SASS-fariabelen. jo kinne it yntegrearje yn jo projekt mei CDN of npm. It is iepen boarne en hat sawat 4k stjerren op Github.
Konklúzje
UI-komponintbiblioteken meitsje perfoarst it bouwen fan in projekt folle makliker. De juste kieze hinget ôf fan 'e funksjes fan it projekt wêrop jo wolle wurkje. Foardat jo yn in nij projekt dûke, is it oan te rieden om de UI-komponintbibleteek te besjen dy't it bêste geskikt is foar it doel.