Vue JS estas progresema JavaScript-kadro, kiu estas uzata por evoluigi unupaĝajn aplikojn (SPAoj) kaj Uzantinterfacojn. Kaj ĝi estas unu el la plej uzataj antaŭfinaj kadroj tie.

 

Unu interesa trajto de Vue estas ĝia kapablo malkonstrui retpaĝon en malsamajn komponentojn. Kaj ĉi tiu procezo fariĝas pli simpla kun la uzo de UI-komponentaj bibliotekoj.

 

Estas diversaj UI-komponentaj bibliotekoj, kiuj povas helpi vin krei komponantojn facile kaj rapide. Do en ĉi tiu blogo, ni revizios la plej bonajn 10 Bibliotekojn de Vue UI por 2021.

 

1. PrimeVue

 

PrimeVue estas simpla uzebla, diverstalenta kaj efika Vue UI Component Library, kiu helpas vin konstrui mirindajn uzantinterfacojn.

 

Ĝi havas pli ol 80+ UI-komponentojn kun plena subteno por Retaj Enhavaj Alirebleco-Gvidlinioj (WCAG) kaj respondema dezajno. Kaj danke al lastatempa ĝisdatigo, la biblioteko nun havas plenan subtenon por Vue 3. Ĝi ankaŭ ricevis multe pli da komponantoj.

 

Unu el la plej bonaj aferoj pri Primevue estas ĝia larĝa gamo de komponantoj. Ili iras de tabeloj kaj paĝigiloj ĝis bone kreitaj grafik-bazitaj organigramoj, kiujn vi povas uzi por krei interagajn Vue-programojn. Ĝi estas malfermfonta kaj havas 1k+ stelojn sur Github kaj 6,983 semajnajn elŝutojn sur NPM.

 

2. Vuetify

 

Vuetify estas Vue UI-Biblioteko kun bele manfaritaj Komponentoj, kiuj uzas la specifon de Materiala Dezajno. Ĉi tio signifas, ke ĝi estis disvolvita ĝuste laŭ la specifoj pri Materiala Dezajno kun ĉiu komponanto zorge kreita por esti modula, respondema kaj efika.

 

Vuetify ebligas al vi personecigi viajn aplikojn per unikaj kaj dinamikaj aranĝoj kaj perfektigi la stilojn de viaj komponantoj per SASS-variabloj.

 

Ĝi ankaŭ subtenas gvidliniojn pri alirebleco, ĉiujn modernajn retumiloj, kaj estas kongrua kun Vue CLI-3. Ĝi estas facile integrebla kaj havas multajn reuzeblajn UI-komponentojn kiel karuseloj, navigacioj kaj kartoj. Vuetify estas malfermfonta kaj kun pli ol 29k steloj sur Github kaj 319,170 semajnaj elŝutoj sur NPM.

 

3. Chakra UI Vue

 

Chakra UI estas simpla modula kaj alirebla komponentbiblioteko, kiu donas al vi la ilojn por konstrui Vue-aplikaĵojn rapide kaj facile.

 

Ĉiuj komponantoj estas alireblaj (ĝi strikte sekvas WAI-ARIA-normojn), temeblaj kaj kunmeteblaj. Ĝi subtenas respondemajn stilojn el la skatolo kaj estas mallum-reĝimo kongrua.

 

Chakra UI ankaŭ enhavas aron da aranĝaj komponantoj kiel CBox kaj CStack, kiuj faciligas stiligi viajn komponantojn per preterpaso de apogiloj. Ĝi ankaŭ permesas vin aŭtomate importi komponantojn de Chakra UI Vue per retpaka kromprogramo. Ĝi estas malfermfonta kaj havas 900+ stelojn sur Github kaj 331 semajnajn elŝutojn sur NPM.

 

4. Bootstrap Vue

 

BootstrapVue, Kun BootstrapVue vi povas konstrui respondemajn, poŝtelefonajn unue, kaj ARIA-alireblajn projektojn en la reto uzante Vue.js kaj la popularan CSS-bibliotekon — Bootstrap. La dokumentaro estas facile komprenebla kaj ankaŭ facile agordi. Ĝi faras front-finajn efektivigojn faritajn pli rapide.

 

Ĝi ofertas pli ol 85 komponantojn, pli ol 45 disponeblajn kromaĵojn, plurajn direktivojn kaj pli ol 1000 ikonojn. Ĝi ankaŭ disponigas funkciajn komponentojn adaptitajn por aranĝoj kaj respondema dezajno. vi ankaŭ povas facile integri BootstrapVue en viajn projektojn Nuxt.js uzante la modulon Nuxt.js.

 

Ĝi ankaŭ estas uzata same kiel la bootstrap CSS-kadro estas uzata. Ĝi estas malfermfonta sur Github kun ĉirkaŭ 12.9k steloj kaj 1.7k forkoj.

 

5. Vuesax

 

Vuesax estas nova UI-kompona kadro kreita kun Vuejs por fari projektojn facile kaj kun unika kaj agrabla stilo, vuesax estas kreita de nulo kaj desegnita por ĉiuj specoj de programistoj de la amanto de fasado ĝis la backend, kiu volas facile krei sian vidan aliron al. la finuzanto. La dezajnoj estas unikaj por ĉiu komponanto kaj ne estas ankritaj al iuj vidaj tendencoj aŭ dezajnaj reguloj, igante projektojn konstruitajn kun ĝi unikaj ankaŭ.

 

ĝi ofertas respondemajn paĝojn kaj reuzeblajn kaj agordeblajn UI-komponentojn. Ankaŭ estas facile komenci aŭ uzi npm aŭ CDN. Ĝi nuntempe ne subtenas Vue CLI 3 en sia lastatempa versio. Ĝi estas malfermfonta sur Github kun ĉirkaŭ 4.9k steloj kaj 6700 semajnaj elŝutoj NPM.

 

6. Ant Design Vue

 

Ant Design vue bazita sur la Ant Design-specifo, Ant Design vue estas vue UI-biblioteko kiu enhavas aron da altkvalitaj komponentoj kaj demonstraĵoj por konstrui riĉajn, interagajn uzantinterfacojn.

 

Ant-design-vue provizas multajn UI-komponentojn por riĉigi viajn TTT-aplikaĵojn kiel Skeleton, tirkeston, statistikojn kaj multe pli.

 

Kun la lastatempa eldono de ant design vue versio 2, ĝi estis ĝisdatigita por esti pli rapida kaj pli facile integrebla, pli malgranda pakgrandeco, kaj ankaŭ subtenas Vue 3, New Composition API-dokumenton. Ĝi ankaŭ subtenas modernajn TTT-legilojn, servilflankan bildadon kaj elektronon. Ĝi havas pli ol 13k stelojn sur Github kaj sur 39,693 semajnaj elŝutoj NPM.

 

7. Kvazaro

 

Quasar estas unu el la plej bonaj Vue UI-kadroj, kiuj permesas al programistoj uzi unu fontkodon por ĉiuj platformoj per Quasar CLI kun la plej bonaj praktikoj el la skatolo. Ĝi ebligas al programistoj koncentriĝi pri la enhavo de sia Apo prefere ol ĉiuj aliaj kaldronaj tegaĵoj (konstrusistemo, aranĝo) ĉirkaŭ ĝi. ĝi fokusiĝas al sekvado de la gvidlinioj de Materialo 2.0 kaj ankaŭ havas tre subtenan komunumon.

 

Unu el la specialaĵoj pri Quasar estas la kapablo skribi kodon unufoje kaj samtempe disfaldi ĝin kiel retejon, Poŝtelefono uzante nur unu kodon. Ekzistas ankaŭ nova versio nuntempe en beta kiu subtenus vue 3 funkciojn. Ĝi havas ĉirkaŭ 17.8k stelojn sur Github.

 

8. Buefy

 

Buefy estas malpeza UI-komponentbiblioteko por Vue JS bazita sur Bulma (CSS-kadro). Buefy kombinas Bulma kun Vue, helpante vin konstrui belaspektajn aplikaĵojn uzante minimuman kodon. ĝi estas la javaskripto-tavolo por via Bulma interfaco.

 

Ĝi povas esti importita tute aŭ unuopaj komponantoj sur ordinara retpaĝo. Integri ĝin en vian projekton estas sufiĉe facila, povas esti farita aŭ per npm aŭ CDN.

 

Buefy provizas pretajn UI-komponentojn, aranĝon kaj ikonojn. La komponantoj povas uzi SASS al via temo. Ĝi ankaŭ subtenas modernajn retumiloj.

 

9. Vue Materialo

 

Vue Material estas vaste uzata, malpeza kadro, kiu efektivigas la specifojn pri Material Design. Ĝi estas unu el la plej bona integriĝo inter specifoj de Vue.js kaj Material Design! Vi povas facile agordi ĝin por konveni ĉiujn viajn bezonojn per facila API.

 

Ĝi kongruas kun respondema dezajno kaj subteno por ĉiuj modernaj TTT-legiloj. La biblioteko estas dividita en Temojn, Komponantojn kaj UI-Elementojn. La temoj donas definitivan gvidilon pri kiel temigi vian aplikaĵon (aŭ skribi viajn proprajn temojn) kaj la Komponantoj kaj UI-Elementoj konsistas el aranĝoj, navigado, tipografio, ikonoj kaj 30 pliaj komponantoj. Ĝi havas ĉirkaŭ 9.2k stelojn kaj 1.1k forkojn sur Github kaj 21k + semajnajn elŝutojn NPM.

 

10. KeenUI

 

KeenUI estas malpeza vue.js UI-biblioteko kun simpla API, inspirita de Materiala Dezajno de Guglo. Keen UI ne estas CSS-kadro. Tial, ĝi ne inkluzivas stilojn por kradsistemo, tipografion, ktp. Anstataŭe, la fokuso estas sur interagaj komponentoj kiuj postulas Javascript.

 

Ĝi havas ĉirkaŭ 30 reuzeblajn komponantojn. La komponantoj estas agordeblaj per superregado de la stiloj per SASS-variabloj. vi povas integri ĝin en vian projekton aŭ uzante CDN aŭ npm. Ĝi estas malfermfonta kaj havas ĉirkaŭ 4k stelojn sur Github.

 

konkludo

 

UI-komponentaj bibliotekoj sendube faciligas konstrui projekton. Elekti la ĝustan dependas de la trajtoj de la projekto, pri kiu vi volas labori. Antaŭ ol plonĝi en novan projekton, estas konsilinde ke oni reviziu la UI-komponan bibliotekon, kiu plej taŭgas por la celo.