Vue JS progresivni je JavaScript okvir koji se koristi za razvoj jednostraničkih aplikacija (SPA) i korisničkih sučelja. I to je jedan od najčešće korištenih front-end okvira.

 

Jedna zanimljiva značajka Vuea je njegova sposobnost rastavljanja web stranice na različite komponente. A ovaj proces postaje jednostavniji upotrebom biblioteka komponenti korisničkog sučelja.

 

Postoje različite biblioteke komponenti korisničkog sučelja koje vam mogu pomoći da jednostavno i brzo izradite komponente. Stoga ćemo u ovom blogu pregledati 10 najboljih biblioteka komponenti Vue UI za 2021. godinu.

 

1. PrimeVue

 

PrimeVue je jednostavna za korištenje, svestrana i učinkovita biblioteka Vue UI komponenti koja vam pomaže izgraditi sjajna korisnička sučelja.

 

Ima preko 80+ komponenti korisničkog sučelja s punom podrškom za Smjernice za pristupačnost web sadržaja (WCAG) i responzivnim dizajnom. A zahvaljujući nedavnom ažuriranju, biblioteka sada ima punu podršku za Vue 3. Također je dobila hrpu dodatnih komponenti.

 

Jedna od najboljih stvari o Primevueu je širok raspon komponenti. Oni se kreću od tablica i paginatora do dobro izrađenih organizacijskih dijagrama temeljenih na grafikonima koje možete koristiti za izradu interaktivnih Vue aplikacija. Otvorenog je koda i ima 1+ zvjezdica na Githubu i 6,983 tjedna preuzimanja na NPM-u.

 

2. Vuetify

 

Vuetify je Vue UI biblioteka s prekrasno ručno izrađenim komponentama koje koriste specifikaciju Material Design. To znači da je razvijen točno prema specifikacijama Material Designa sa svakom komponentom pomno izrađenom da bude modularna, osjetljiva i učinkovita.

 

Vuetify vam omogućuje da prilagodite svoje aplikacije jedinstvenim i dinamičnim izgledima i usavršite stilove svojih komponenti pomoću SASS varijabli.

 

Također podržava smjernice pristupačnosti, sve moderne preglednike i kompatibilan je s Vue CLI-3. Lako ga je integrirati i ima puno komponenti korisničkog sučelja za višekratnu upotrebu kao što su karuseli, navigacije i kartice. Vuetify je otvorenog koda i s preko 29 tisuća zvjezdica na Githubu i 319,170 XNUMX tjednih preuzimanja na NPM-u.

 

3. Čakra UI Vue

 

Chakra UI jednostavna je modularna i dostupna biblioteka komponenti koja vam daje alate za brzu i jednostavnu izradu Vue aplikacija.

 

Sve komponente su dostupne (strogo slijede WAI-ARIA standarde), tematizirane i sastavljajuće. Podržava responzivne stilove izvan kutije i kompatibilan je s mračnim načinom rada.

 

Chakra UI također sadrži skup komponenti izgleda kao što su CBox i CStack koje olakšavaju stiliziranje vaših komponenti prosljeđivanjem rekvizita. Također vam omogućuje da automatski uvezete Chakra UI Vue komponente pomoću webpack plugin rješenja. Otvorenog je koda i ima 900+ zvjezdica na Githubu i 331 tjedno preuzimanje na NPM-u.

 

4. Bootstrap Vue

 

BootstrapVue, s BootstrapVueom možete graditi responzivne, mobilne prve i ARIA dostupne projekte na webu koristeći Vue.js i popularnu front-end CSS biblioteku — Bootstrap. Dokumentaciju je lako razumjeti, a također ju je lako postaviti. Omogućuje bržu implementaciju front-enda.

 

Nudi 85+ komponenti, preko 45 dostupnih dodataka, nekoliko direktiva i 1000+ ikona. Također pruža funkcionalne komponente prilagođene izgledima i responzivnom dizajnu. također možete jednostavno integrirati BootstrapVue u svoje Nuxt.js projekte koristeći Nuxt.js modul.

 

Također se koristi na isti način kao što se koristi bootstrap CSS okvir. Otvoren je kod na Githubu s oko 12.9 tisuća zvijezda i 1.7 tisuća forkova.

 

5. Vuesax

 

Vuesax je novi okvir za komponente korisničkog sučelja kreiran s Vuejsom za jednostavno stvaranje projekata s jedinstvenim i ugodnim stilom, vuesax je stvoren od nule i dizajniran za sve vrste programera od ljubitelja frontenda do backenda koji žele jednostavno stvoriti svoj vizualni pristup krajnji korisnik. Dizajni su jedinstveni za svaku komponentu i nisu povezani s bilo kakvim vizualnim trendovima ili pravilima dizajna, što projekte izgrađene s njim također čini jedinstvenima.

 

nudi responzivne stranice i višekratno upotrebljive i prilagodljive komponente sučelja. Također je lako započeti s korištenjem npm-a ili CDN-a. Trenutno ne podržava Vue CLI 3 u svojoj novijoj verziji. Otvoren je kod na Githubu s oko 4.9 tisuća zvjezdica i 6700 tjednih preuzimanja NPM.

 

6. Ant Design Vue

 

Ant Design vue temeljen na Ant Design specifikaciji, Ant design vue je vue UI biblioteka koja sadrži skup visokokvalitetnih komponenti i demonstracija za izgradnju bogatih, interaktivnih korisničkih sučelja.

 

Ant-design-vue pruža obilje komponenti korisničkog sučelja za obogaćivanje vaših web aplikacija kao što su kostur, ladica, statistika i još mnogo toga.

 

S nedavnim izdanjem ant design vue verzije 2, ažurirana je kako bi bila brža i lakša za integraciju, manja veličina paketa, a također podržava Vue 3, New Composition API dokument. Također podržava moderne web preglednike, iscrtavanje na strani poslužitelja i electron. Ima više od 13 tisuća zvjezdica na Githubu i 39,693 XNUMX tjednih preuzimanja NPM.

 

7. Kvazar

 

Quasar je jedan od najboljih Vue UI okvira koji razvojnim programerima omogućuje korištenje jedne baze izvornog koda za sve platforme putem Quasar CLI-ja s najboljim praksama iz kutije. Omogućuje razvojnim programerima da se usredotoče na sadržaj svoje aplikacije, a ne na sve ostale stvari koje ga okružuju (sustav izrade, izgled). usredotočen je na praćenje smjernica Material 2.0 i također ima zajednicu koja ga podržava.

 

Jedna od posebnih stvari vezanih uz Quasar je mogućnost pisanja koda jednom i istovremenog postavljanja kao web stranice, mobilne aplikacije koristeći samo jednu bazu koda. Također postoji nova verzija koja je trenutno u beta fazi i podržava značajke vue 3. Ima oko 17.8 tisuća zvjezdica na Githubu.

 

8. Buefy

 

Buefy je lagana biblioteka komponenti korisničkog sučelja za Vue JS temeljena na Bulmi (CSS okviru). Buefy kombinira Bulma s Vueom, pomažući vam da izradite zgodne aplikacije koristeći minimalan kod. to je javascript sloj za vaše Bulma sučelje.

 

Može se uvesti u cijelosti ili pojedinačne komponente na običnu web stranicu. Integracija u vaš projekt prilično je jednostavna, može se izvršiti pomoću npm-a ili CDN-a.

 

Buefy nudi gotove UI komponente, izgled i ikone. Komponente mogu koristiti SASS za vašu temu. Također podržava moderne preglednike.

 

9. Vue Materijal

 

Vue Material široko je korišten, lagan okvir koji implementira specifikacije materijalnog dizajna. To je jedna od najboljih integracija između specifikacija Vue.js i Material Design! Možete ga jednostavno konfigurirati da odgovara svim vašim potrebama putem jednostavnog API-ja.

 

Kompatibilan je s responzivnim dizajnom i podrškom za sve moderne web preglednike. Biblioteka je podijeljena na teme, komponente i elemente korisničkog sučelja. Teme daju konačan vodič o tome kako tematizirati svoju aplikaciju (ili napisati vlastite teme), a komponente i elementi korisničkog sučelja sastoje se od izgleda, navigacije, tipografije, ikona i još 30 komponenti. Ima oko 9.2 tisuća zvjezdica i 1.1 tisuća forkova na Githubu i 21 tisuća + NPM preuzimanja tjedno.

 

10. KeenUI

 

KeenUI je lagana vue.js UI biblioteka s jednostavnim API-jem, inspirirana Googleovim materijalnim dizajnom. Keen UI nije CSS okvir. Stoga ne uključuje stilove za mrežni sustav, tipografiju itd. Umjesto toga, fokus je na interaktivnim komponentama koje zahtijevaju Javascript.

 

Ima oko 30 komponenti za višekratnu upotrebu. Komponente se mogu prilagoditi nadjačavanjem stilova pomoću SASS varijabli. možete ga integrirati u svoj projekt koristeći CDN ili npm. Otvorenog je koda i ima oko 4k zvjezdica na Githubu.

 

Zaključak

 

Biblioteke komponenti korisničkog sučelja definitivno olakšavaju izradu projekta. Odabir pravog ovisi o značajkama projekta na kojem želite raditi. Prije nego što se upustite u novi projekt, preporučljivo je da pregledate biblioteku komponenti korisničkog sučelja koja je najprikladnija za tu svrhu.