Vue JS on progressiivne JavaScripti raamistik, mida kasutatakse üheleheliste rakenduste (SPA) ja kasutajaliideste arendamiseks. Ja see on üks kõige laialdasemalt kasutatavaid esiotsa raamistikke.
Vue üks huvitav omadus on selle võime jagada veebileht erinevateks komponentideks. Ja see protsess muutub kasutajaliidese komponentteekide kasutamisega lihtsamaks.
On mitmeid kasutajaliidese komponentide teeke, mis aitavad teil hõlpsalt ja kiiresti komponente luua. Nii et selles ajaveebis vaatame üle 10. aasta 2021 parimat Vue kasutajaliidese komponentteeki.
1. PrimeVue
PrimeVue on lihtsalt kasutatav, mitmekülgne ja toimiv Vue kasutajaliidese komponentteek, mis aitab teil luua suurepäraseid kasutajaliideseid.
Sellel on üle 80 kasutajaliidese komponendi, mis toetavad täielikult veebisisu juurdepääsetavuse suuniseid (WCAG) ja reageerivat disaini. Ja tänu hiljutisele värskendusele on raamatukogul nüüd Vue 3 täielik tugi. See sai ka hulga rohkem komponente.
Üks parimaid asju Primevue juures on selle lai komponentide valik. Need ulatuvad tabelitest ja leheküljenumbritest hästi koostatud graafikupõhiste organisatsiooniskeemideni, mida saate kasutada interaktiivsete Vue rakenduste loomiseks. See on avatud lähtekoodiga ja sellel on Githubis üle 1 tärni ning NPM-is on 6,983 nädalas allalaadimist.
2. Vuetify
Vuetify on Vue kasutajaliidese raamatukogu kaunilt käsitsi valmistatud komponentidega, mis kasutab materjalidisaini spetsifikatsiooni. See tähendab, et see on välja töötatud täpselt vastavalt materjalidisaini spetsifikatsioonidele, kusjuures iga komponent on hoolikalt valmistatud modulaarseks, tundlikuks ja tõhusaks.
Vuetify võimaldab teil kohandada oma rakendusi ainulaadsete ja dünaamiliste paigutustega ning täiustada komponentide stiile, kasutades SASS-i muutujaid.
See toetab ka juurdepääsetavuse juhiseid, kõiki kaasaegseid brausereid ja ühildub Vue CLI-3-ga. Seda on lihtne integreerida ja sellel on palju korduvkasutatavaid kasutajaliidese komponente, nagu karussellid, navigatsioonid ja kaardid. Vuetify on avatud lähtekoodiga ja Githubis on üle 29 319,170 tärni ning NPM-is on iganädalasi allalaadimisi XNUMX XNUMX.
3. Chakra UI Vue
Chakra kasutajaliides on lihtne modulaarne ja juurdepääsetav komponentide kogu, mis annab teile tööriistad Vue rakenduste kiireks ja hõlpsaks loomiseks.
Kõik komponendid on juurdepääsetavad (see järgib rangelt WAI-ARIA standardeid), teemasid ja komponeeritavaid. See toetab reageerivaid stiile ja ühildub pimeda režiimiga.
Chakra kasutajaliides sisaldab ka komplekti paigutuskomponente, nagu CBox ja CStack, mis hõlbustavad komponentide stiili kujundamist rekvisiite edastades. Samuti võimaldab see Chakra UI Vue komponente automaatselt importida, kasutades veebipaketi pistikprogrammi lahendust. See on avatud lähtekoodiga ja sellel on Githubis 900+ tärni ning NPM-i allalaadimine toimub 331 nädalas.
4. Bootstrap Vue
BootstrapVue, BootstrapVue abil saate Vue.js'i ja populaarse CSS-i esiotsa teegi — Bootstrapi abil luua tundliku, mobiilipõhise ja ARIA-ga juurdepääsetavaid projekte veebis. Dokumentatsiooni on lihtne mõista ja seda on lihtne seadistada. See muudab esiotsa juurutamise kiiremaks.
See pakub 85+ komponenti, üle 45 saadaoleva pistikprogrammi, mitmeid direktiive ja 1000+ ikooni. See pakub ka funktsionaalseid komponente, mis on kohandatud paigutuse ja tundliku disaini jaoks. Mooduli Nuxt.js abil saate hõlpsasti integreerida BootstrapVue oma Nuxt.js projektidesse.
Seda kasutatakse ka samamoodi nagu bootstrap CSS-i raamistikku. See on avatud lähtekoodiga Githubis, umbes 12.9 1.7 tärni ja XNUMX XNUMX kahvliga.
5. Vuesax
Vuesax on uus kasutajaliidese komponentraamistik, mis on loodud Vuejsiga, et teha projekte hõlpsalt ning ainulaadse ja meeldiva stiiliga, vuesax on loodud nullist ja mõeldud igat tüüpi arendajatele alates kasutajaliidese armastajatest kuni taustaprogrammideni, kes soovivad hõlpsalt luua oma visuaalset lähenemist. lõppkasutaja. Disainid on iga komponendi jaoks ainulaadsed ega ole seotud ühegi visuaalse suundumusega ega disainireeglitega, mistõttu on ka sellega ehitatud projektid unikaalsed.
see pakub reageerivaid lehti ning korduvkasutatavaid ja kohandatavaid kasutajaliidese komponente. Samuti on lihtne alustada npm või CDN-i kasutamisega. Praegu ei toeta see Vue CLI 3 oma viimases versioonis. See on avatud lähtekoodiga Githubis, umbes 4.9 6700 tärni ja XNUMX nädalas NPM-i allalaadimist.
6. Ant Design Vue
Ant Design vue, mis põhineb Ant Designi spetsifikatsioonil, on Ant Design vue kasutajaliidese teek, mis sisaldab kvaliteetsete komponentide ja demode komplekti rikkalike interaktiivsete kasutajaliideste loomiseks.
Ant-design-vue pakub palju kasutajaliidese komponente, et rikastada teie veebirakendusi, nagu skelett, sahtel, statistika ja palju muud.
Ant design vue versiooni 2 hiljutise väljalaskega on seda värskendatud, et see oleks kiirem ja hõlpsamini integreeritav, väiksema komplekti suurus ning toetab ka Vue 3, New Composition API dokumenti. Samuti toetab see kaasaegseid veebibrausereid, serveripoolset renderdamist ja elektroni. Sellel on Githubis üle 13 39,693 tärni ja NPM-i allalaadimine toimub XNUMX XNUMX nädalas.
7. Kvaasar
Quasar on üks parimaid Vue kasutajaliidese raamistikke, mis võimaldab arendajatel kasutada Quasari CLI kaudu kõigi platvormide jaoks ühte lähtekoodi baasi koos parimate tavadega. See võimaldab arendajatel keskenduda oma rakenduse sisule, mitte kõigele muule selle ümber olevale katla plaadistusele (ehitussüsteem, paigutus). see on keskendunud Material 2.0 juhiste järgimisele ja sellel on ka väga toetav kogukond.
Üks Quasari erilisi omadusi on võimalus kirjutada kood ühe korra ja juurutada see samaaegselt veebisaidina, mobiilirakendusena, kasutades ainult ühte koodibaasi. Praegu on beetaversioonis ka uus versioon, mis toetab vue 3 funktsioone. Sellel on Githubis umbes 17.8 XNUMX tärni.
8. Buefy
Buefy on Vue JS-i jaoks mõeldud kerge kasutajaliidese komponentteek, mis põhineb Bulmal (CSS-i raamistik). Buefy ühendab Bulma ja Vue, aidates teil minimaalse koodi abil luua ilusaid rakendusi. see on teie Bulma liidese JavaScripti kiht.
Seda saab importida kas täielikult või üksikute komponentidena tavalisel veebilehel. Selle oma projekti integreerimine on üsna lihtne, seda saab teha kas npm või CDN-i abil.
Buefy pakub valmis kasutajaliidese komponente, paigutust ja ikoone. Komponendid saavad teie teema jaoks kasutada SASS-i. Samuti toetab see kaasaegseid brausereid.
9. Vue materjal
Vue Material on laialdaselt kasutatav kerge raamistik, mis rakendab materjalidisaini spetsifikatsioone. See on üks parimaid integratsioone Vue.js ja Material Designi spetsifikatsioonide vahel! Saate selle hõlpsalt konfigureerida, et see vastaks kõigile oma vajadustele lihtsa API kaudu.
See ühildub tundliku disaini ja kõigi kaasaegsete veebibrauserite toega. Teek on jagatud teemadeks, komponentideks ja kasutajaliidese elementideks. Teemad annavad lõpliku juhendi rakenduse teemastamiseks (või oma teemade kirjutamiseks) ning komponendid ja kasutajaliidese elemendid koosnevad paigutusest, navigeerimisest, tüpograafiast, ikoonidest ja veel 30 komponendist. Sellel on Githubis umbes 9.2 1.1 tähte ja 21 XNUMX kahvlit ning XNUMX XNUMX + nädalas NPM allalaadimist.
10. KeenUI
KeenUI on kerge vue.js kasutajaliidese teek lihtsa API-ga, mis on inspireeritud Google'i materjalidisainist. Keen UI ei ole CSS-i raamistik. Seetõttu ei sisalda see ruudustiku, tüpograafia jms stiile. Selle asemel keskendutakse interaktiivsetele komponentidele, mis nõuavad Javascripti.
Sellel on umbes 30 korduvkasutatavat komponenti. Komponente saab kohandada, alistades stiilid SASS-i muutujate abil. saate selle oma projekti integreerida kas CDN-i või npm-i abil. See on avatud lähtekoodiga ja sellel on Githubis umbes 4k tärni.
Järeldus
Kasutajaliidese komponentide raamatukogud muudavad projekti koostamise kindlasti palju lihtsamaks. Õige valimine sõltub selle projekti omadustest, millega soovite töötada. Enne uude projekti sukeldumist on soovitatav üle vaadata kasutajaliidese komponentide kogu, mis sobib selleks otstarbeks kõige paremini.