Vue JS je progresivno ogrodje JavaScript, ki se uporablja za razvoj enostranskih aplikacij (SPA) in uporabniških vmesnikov. In to je eno najpogosteje uporabljenih sprednjih ogrodij.

 

Ena zanimiva lastnost Vue je njegova sposobnost, da spletno stran razdeli na različne komponente. Ta postopek postane enostavnejši z uporabo knjižnic komponent uporabniškega vmesnika.

 

Obstajajo različne knjižnice komponent uporabniškega vmesnika, ki vam lahko pomagajo pri preprostem in hitrem ustvarjanju komponent. Zato bomo v tem blogu pregledali 10 najboljših knjižnic komponent uporabniškega vmesnika Vue za leto 2021.

 

1. PrimeVue

 

PrimeVue je preprosta za uporabo, vsestranska in zmogljiva knjižnica komponent uporabniškega vmesnika Vue, ki vam pomaga zgraditi odlične uporabniške vmesnike.

 

Ima več kot 80+ komponent uporabniškega vmesnika s polno podporo za smernice za dostopnost spletne vsebine (WCAG) in odzivno zasnovo. Zahvaljujoč nedavni posodobitvi ima knjižnica zdaj polno podporo za Vue 3. Dobila je tudi kup več komponent.

 

Ena najboljših stvari pri Primevue je njegova široka paleta komponent. Segajo od tabel in paginatorjev do dobro izdelanih organigramov na osnovi grafov, ki jih lahko uporabite za ustvarjanje interaktivnih aplikacij Vue. Je odprtokoden in ima 1 zvezdic na Githubu in 6,983 tedenskih prenosov na NPM.

 

2. Vuetify

 

Vuetify je knjižnica uporabniškega vmesnika Vue s čudovito ročno izdelanimi komponentami, ki uporablja specifikacijo Material Design. To pomeni, da je bil razvit natančno v skladu s specifikacijami Material Design, pri čemer je vsaka komponenta natančno izdelana tako, da je modularna, odzivna in zmogljiva.

 

Vuetify vam omogoča prilagajanje vaših aplikacij z edinstvenimi in dinamičnimi postavitvami ter izpopolnjevanje slogov vaših komponent z uporabo spremenljivk SASS.

 

Podpira tudi smernice za dostopnost, vse sodobne brskalnike in je združljiv z Vue CLI-3. Enostaven za integracijo in ima veliko komponent uporabniškega vmesnika za večkratno uporabo, kot so vrtiljaki, navigacije in kartice. Vuetify je odprtokoden in ima več kot 29 zvezdic na Githubu in 319,170 tedenskih prenosov na NPM.

 

3. Chakra UI Vue

 

Uporabniški vmesnik Chakra je preprosta modularna in dostopna knjižnica komponent, ki vam nudi orodja za hitro in enostavno izdelavo aplikacij Vue.

 

Vse komponente so dostopne (strogo sledi standardom WAI-ARIA), tematizirane in sestavljive. Podpira odzivne sloge takoj po namestitvi in ​​je združljiv s temnim načinom.

 

Uporabniški vmesnik Chakra vsebuje tudi nabor komponent postavitve, kot sta CBox in CStack, ki olajšata oblikovanje vaših komponent s posredovanjem rekvizitov. Omogoča vam tudi samodejni uvoz komponent Chakra UI Vue z uporabo rešitve vtičnika webpack. Je odprtokoden in ima 900+ zvezdic na Githubu in 331 tedenskih prenosov na NPM.

 

4. Bootstrap Vue

 

BootstrapVue, z BootstrapVue lahko gradite odzivne, mobilne in ARIA dostopne projekte v spletu z uporabo Vue.js in priljubljene sprednje knjižnice CSS — Bootstrap. Dokumentacija je enostavna za razumevanje in tudi nastavitev. Omogoča hitrejše izvajanje vhodnih implementacij.

 

Ponuja več kot 85 komponent, več kot 45 razpoložljivih vtičnikov, več direktiv in več kot 1000 ikon. Zagotavlja tudi funkcionalne komponente, prilagojene za postavitve in odziven dizajn. z modulom Nuxt.js lahko preprosto integrirate BootstrapVue v svoje projekte Nuxt.js.

 

Uporablja se tudi na enak način kot se uporablja ogrodje CSS za zagon. Je odprtokoden na Githubu s približno 12.9k zvezdicami in 1.7k razcepi.

 

5. Vuesax

 

Vuesax je novo ogrodje za komponente uporabniškega vmesnika, ustvarjeno z Vuejs za preprosto izdelavo projektov z edinstvenim in prijetnim slogom, vuesax je ustvarjen iz nič in zasnovan za vse vrste razvijalcev od ljubiteljev sprednjega dela do zaledja, ki želijo preprosto ustvariti svoj vizualni pristop do končnega uporabnika. Dizajni so edinstveni za vsako komponento in niso zasidrani v nobenih vizualnih trendih ali pravilih oblikovanja, zaradi česar so tudi projekti, zgrajeni z njim, edinstveni.

 

ponuja odzivne strani ter večkrat uporabne in prilagodljive komponente uporabniškega vmesnika. Prav tako je enostavno začeti z uporabo npm ali CDN. Trenutno ne podpira Vue CLI 3 v najnovejši različici. Je odprtokoden na Githubu s približno 4.9 tisoč zvezdicami in 6700 tedenskimi prenosi NPM.

 

6. Ant Design Vue

 

Ant Design vue, ki temelji na specifikaciji Ant Design, Ant design vue je knjižnica uporabniškega vmesnika vue, ki vsebuje nabor visokokakovostnih komponent in predstavitev za ustvarjanje bogatih, interaktivnih uporabniških vmesnikov.

 

Ant-design-vue ponuja veliko komponent uporabniškega vmesnika za obogatitev vaših spletnih aplikacij, kot so Skeleton, predal, statistika in še veliko več.

 

Z nedavno izdajo različice 2 ant design vue je bila posodobljena tako, da je hitrejša in enostavnejša za integracijo, manjša velikost svežnja in podpira tudi Vue 3, nov dokument API za sestavo. Podpira tudi sodobne spletne brskalnike, strežniško upodabljanje in electron. Ima več kot 13 zvezdic na Githubu in 39,693 tedenskih prenosov NPM.

 

7. Kvazar

 

Quasar je eno najboljših ogrodij uporabniškega vmesnika Vue, ki razvijalcem omogoča uporabo ene baze izvorne kode za vse platforme prek Quasar CLI z najboljšimi praksami takoj po namestitvi. Omogoča razvijalcem, da se osredotočijo na vsebino svoje aplikacije, namesto na vse druge stvari, ki se navezujejo (gradbeni sistem, postavitev) okoli nje. osredotočen je na sledenje smernicam Material 2.0 in ima tudi zelo podporo skupnosti.

 

Ena od posebnih stvari pri Quasarju je zmožnost enkratnega pisanja kode in njene istočasne uvedbe kot spletne strani, mobilne aplikacije z uporabo samo ene kodne baze. Obstaja tudi nova različica, ki je trenutno v beta različici, ki podpira funkcije vue 3. Na Githubu ima približno 17.8k zvezdic.

 

8. Buefy

 

Buefy je lahka knjižnica komponent uporabniškega vmesnika za Vue JS, ki temelji na Bulmi (ogrodje CSS). Buefy združuje Bulma z Vue, kar vam pomaga graditi aplikacije, ki izgledajo dobro, z minimalno kodo. je plast javascript za vaš vmesnik Bulma.

 

Lahko ga uvozite v celoti ali posamezne komponente na običajno spletno stran. Integracija v vaš projekt je precej enostavna, to lahko storite z uporabo npm ali CDN.

 

Buefy ponuja že pripravljene komponente uporabniškega vmesnika, postavitev in ikone. Komponente lahko uporabljajo SASS za vašo temo. Podpira tudi sodobne brskalnike.

 

9. Material Vue

 

Vue Material je široko uporabljen, lahek okvir, ki izvaja specifikacije Material Design. Je ena najboljših integracij med specifikacijami Vue.js in Material Design! Z enostavnim API-jem ga lahko preprosto konfigurirate tako, da ustreza vsem vašim potrebam.

 

Združljiv je z odzivnim dizajnom in podporo za vse sodobne spletne brskalnike. Knjižnica je razdeljena na teme, komponente in elemente uporabniškega vmesnika. Teme dajejo dokončen vodnik o tem, kako tematizirati svojo aplikacijo (ali napisati svoje teme), komponente in elementi uporabniškega vmesnika pa so sestavljeni iz postavitev, navigacije, tipografije, ikon in 30 drugih komponent. Ima približno 9.2k zvezdic in 1.1k forkov na Githubu ter 21k + tedenskih prenosov NPM.

 

10. KeenUI

 

KeenUI je lahka knjižnica uporabniškega vmesnika vue.js s preprostim API-jem, ki se zgleduje po Googlovem materialnem oblikovanju. Uporabniški vmesnik Keen ni okvir CSS. Zato ne vključuje slogov za mrežni sistem, tipografije itd. Namesto tega je poudarek na interaktivnih komponentah, ki zahtevajo Javascript.

 

Ima približno 30 komponent za večkratno uporabo. Komponente je mogoče prilagoditi s preglasitvijo slogov s spremenljivkami SASS. lahko ga integrirate v svoj projekt z uporabo CDN ali npm. Je odprtokoden in ima približno 4k zvezdic na Githubu.

 

zaključek

 

Knjižnice komponent uporabniškega vmesnika vsekakor olajšajo izdelavo projekta. Izbira pravega je odvisna od značilnosti projekta, na katerem želite delati. Preden se potopite v nov projekt, je priporočljivo, da pregledate knjižnico komponent uporabniškega vmesnika, ki je najbolj primerna za ta namen.