Vue JS er en progressiv JavaScript-ramme, der bruges til at udvikle single-page applikationer (SPA'er) og brugergrænseflader. Og det er en af ​​de mest udbredte frontend-frameworks derude.

 

Et interessant træk ved Vue er dens evne til at opdele en webside i forskellige komponenter. Og denne proces bliver enklere med brugen af ​​UI-komponentbiblioteker.

 

Der er forskellige UI-komponentbiblioteker, der kan hjælpe dig med at oprette komponenter nemt og hurtigt. Så i denne blog vil vi gennemgå de 10 bedste Vue UI-komponentbiblioteker for 2021.

 

1. PrimeVue

 

PrimeVue er et brugervenligt, alsidigt og funktionelt Vue UI-komponentbibliotek, der hjælper dig med at bygge fantastiske brugergrænseflader.

 

Det har over 80+ UI-komponenter med fuld understøttelse af Web Content Accessibility Guidelines (WCAG) og responsivt design. Og takket være en nylig opdatering har biblioteket nu fuld understøttelse af Vue 3. Det fik også en masse flere komponenter.

 

En af de bedste ting ved Primevue er dets brede udvalg af komponenter. De spænder fra tabeller og paginatorer til veludformede grafbaserede organisationsdiagrammer, som du kan bruge til at skabe interaktive Vue-apps. Det er open source og har 1k+ stjerner på Github og 6,983 ugentlige downloads på NPM.

 

2. Vuetify

 

Vuetify er et Vue UI-bibliotek med smukt håndlavede komponenter, der bruger Material Design-specifikationen. Det betyder, at den er udviklet nøjagtigt i overensstemmelse med Material Design-specifikationerne, hvor hver komponent er omhyggeligt udformet til at være modulopbygget, lydhør og ydeevne.

 

Vuetify lader dig tilpasse dine applikationer med unikke og dynamiske layouts og perfektionere dine komponenters stilarter ved hjælp af SASS-variabler.

 

Den understøtter også retningslinjer for tilgængelighed, alle moderne browsere og er kompatibel med Vue CLI-3. Det er nemt at integrere og har en masse genbrugelige UI-komponenter som karruseller, navigationer og kort. Vuetify er open source og med over 29 stjerner på Github og 319,170 ugentlige downloads på NPM.

 

3. Chakra UI Vue

 

Chakra UI er et simpelt modulært og tilgængeligt komponentbibliotek, der giver dig værktøjerne til at bygge Vue-applikationer hurtigt og nemt.

 

Alle komponenterne er tilgængelige (det følger strengt WAI-ARIA standarder), tematiske og komponerbare. Den understøtter responsive stilarter ud af æsken og er kompatibel med mørk tilstand.

 

Chakra UI indeholder også et sæt layoutkomponenter som CBox og CStack, der gør det nemt at style dine komponenter ved at sende rekvisitter. Det giver dig også mulighed for automatisk at importere Chakra UI Vue-komponenter ved hjælp af en webpack-plugin-løsning. Det er open source og har 900+ stjerner på Github og 331 ugentlige downloads på NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Med BootstrapVue kan du bygge responsive, mobile-first og ARIA-tilgængelige projekter på nettet ved hjælp af Vue.js og det populære front-end CSS-bibliotek — Bootstrap. Dokumentationen er let at forstå, og den er også nem at sætte op. Det gør front-end implementeringer gjort hurtigere.

 

Det tilbyder 85+ komponenter, over 45 tilgængelige plugins, flere direktiver og 1000+ ikoner. Det giver også funktionelle komponenter, der er skræddersyet til layout og responsivt design. du kan også nemt integrere BootstrapVue i dine Nuxt.js-projekter ved hjælp af Nuxt.js-modulet.

 

Det bruges også på samme måde som bootstrap CSS-rammeværket bliver brugt. Det er open source på Github med omkring 12.9k stjerner og 1.7k gafler.

 

5. Vuesax

 

Vuesax er en ny UI-komponentramme skabt med Vuejs for at lave projekter nemt og med en unik og behagelig stil, vuesax er skabt fra bunden og designet til alle typer udviklere fra frontend-elskeren til backend, der nemt vil skabe deres visuelle tilgang til slutbrugeren. Designene er unikke for hver komponent og er ikke forankret til nogen visuelle tendenser eller designregler, hvilket gør projekter bygget med det unikke også.

 

det tilbyder responsive sider og genbrugelige og tilpasselige UI-komponenter. Det er også nemt at komme i gang med enten at bruge npm eller CDN. Den understøtter i øjeblikket ikke Vue CLI 3 i sin seneste version. Det er open source på Github med omkring 4.9k stjerner og 6700 ugentlige downloads NPM.

 

6. Ant Design Vue

 

Ant Design vue baseret på Ant Design-specifikationen, Ant design vue er et vue UI-bibliotek, der indeholder et sæt højkvalitetskomponenter og demoer til opbygning af rige, interaktive brugergrænseflader.

 

Ant-design-vue giver masser af UI-komponenter til at berige dine webapplikationer såsom skelet, skuffe, statistik og meget mere.

 

Med den seneste udgivelse af ant design vue version 2 er den blevet opdateret til at være hurtigere og nemmere at integrere, mindre bundtstørrelse og understøtter også Vue 3, New Composition API-dokument. Det understøtter også moderne webbrowsere, gengivelse på serversiden og elektron. Den har over 13 stjerner på Github og på 39,693 ugentlige downloads NPM.

 

7. Kvasar

 

Quasar er en af ​​de bedste Vue UI-frameworks, der giver udviklere mulighed for at bruge én kildekodebase til alle platforme gennem Quasar CLI med den bedste praksis ud af boksen. Det lader udviklere fokusere på indholdet af deres app frem for alle andre kedelbelægningsting (byggesystem, layout) omkring den. det er fokuseret på at følge Material 2.0-retningslinjerne og har også et meget støttende fællesskab.

 

En af de specielle ting ved Quasar er evnen til at skrive kode én gang og samtidig implementere den som et websted, en mobilapp ved hjælp af kun én kodebase. Der er også en ny version i betaversion, som understøtter vue 3-funktioner. Den har omkring 17.8k stjerner på Github.

 

8. Buefy

 

Buefy er et letvægts UI-komponentbibliotek til Vue JS baseret på Bulma (en CSS-ramme). Buefy kombinerer Bulma med Vue, og hjælper dig med at bygge flotte applikationer med minimal kode. det er javascript-laget til din Bulma-grænseflade.

 

Det kan enten importeres fuldstændigt eller enkelte komponenter på en almindelig webside. Det er ret nemt at integrere det i dit projekt, det kan enten gøres ved hjælp af npm eller CDN.

 

Buefy leverer færdige UI-komponenter, layout og ikoner. Komponenterne kan bruge SASS til dit tema. Det understøtter også moderne browsere.

 

9. Vue Materiale

 

Vue Material er en meget brugt letvægtsramme, der implementerer Material Design-specifikationerne. Det er en af ​​de bedste integrationer mellem Vue.js og Material Design-specifikationer! Du kan nemt konfigurere den, så den passer til alle dine behov gennem en nem API.

 

Den er kompatibel med responsivt design og understøttelse af alle moderne webbrowsere. Biblioteket er opdelt i temaer, komponenter og UI-elementer. Temaerne giver en definitiv guide til, hvordan du tematiserer din applikation (eller skriver dine egne temaer), og komponenterne og UI-elementerne består af layouts, navigation, typografi, ikoner og 30 flere komponenter. Den har omkring 9.2k stjerner og 1.1k gafler på Github og 21k + ugentlige downloads NPM.

 

10. KeenUI

 

KeenUI er et letvægts vue.js UI-bibliotek med en simpel API, inspireret af Googles Material Design. Keen UI er ikke en CSS-ramme. Derfor inkluderer det ikke stilarter til et gittersystem, typografi osv. I stedet er fokus på interaktive komponenter, der kræver Javascript.

 

Den har omkring 30 genanvendelige komponenter. Komponenterne kan tilpasses ved at tilsidesætte stilene ved hjælp af SASS-variabler. du kan integrere det i dit projekt enten ved hjælp af CDN eller npm. Det er open source og har omkring 4k stjerner på Github.

 

Konklusion

 

UI-komponentbiblioteker gør bestemt opbygningen af ​​et projekt meget nemmere. At vælge den rigtige afhænger af funktionerne i det projekt, du vil arbejde på. Før du dykker ned i et nyt projekt, er det tilrådeligt, at en gennemgår det UI-komponentbibliotek, der er bedst egnet til formålet.