Vue JS on progressiivinen JavaScript-kehys, jota käytetään yksisivuisten sovellusten (SPA:iden) ja käyttöliittymien kehittämiseen. Ja se on yksi laajimmin käytetyistä etupään kehyksistä.

 

Yksi Vuen mielenkiintoinen ominaisuus on sen kyky jakaa verkkosivu eri osiin. Ja tämä prosessi yksinkertaistuu käyttöliittymäkomponenttikirjastojen käytön myötä.

 

On olemassa useita käyttöliittymäkomponenttikirjastoja, joiden avulla voit luoda komponentteja helposti ja nopeasti. Joten tässä blogissa aiomme tarkastella 10 parasta Vue UI -komponenttikirjastoa vuodelle 2021.

 

1. PrimeVue

 

PrimeVue on helppokäyttöinen, monipuolinen ja suorituskykyinen Vue UI -komponenttikirjasto, jonka avulla voit rakentaa mahtavia käyttöliittymiä.

 

Siinä on yli 80 käyttöliittymäkomponenttia, jotka tukevat täysin Web Content Accessibility Guidelines (WCAG) -ohjeita ja reagoivaa suunnittelua. Äskettäisen päivityksen ansiosta kirjastolla on nyt täysi tuki Vue 3:lle. Se sai myös joukon lisää komponentteja.

 

Yksi Primevuen parhaista asioista on sen laaja komponenttivalikoima. Ne vaihtelevat taulukoista ja sivuttajista hyvin muotoiltuihin kaavioihin perustuviin organisaatiokaavioihin, joita voit käyttää interaktiivisten Vue-sovellusten luomiseen. Se on avoimen lähdekoodin, ja siinä on yli 1 6,983 tähteä Githubissa ja XNUMX XNUMX viikoittaista latausta NPM:llä.

 

2. Vuetify

 

Vuetify on Vue UI -kirjasto kauniisti käsintehdyillä komponenteilla, joka käyttää Material Design -spesifikaatiota. Tämä tarkoittaa, että se on kehitetty täsmälleen materiaalisuunnittelun vaatimusten mukaisesti, ja jokainen komponentti on suunniteltu huolellisesti modulaariseksi, reagoivaksi ja suorituskykyiseksi.

 

Vuetifyn avulla voit mukauttaa sovelluksiasi ainutlaatuisilla ja dynaamisilla asetteluilla ja täydentää komponenttien tyylejä SASS-muuttujien avulla.

 

Se tukee myös esteettömyysohjeita, kaikkia nykyaikaisia ​​selaimia ja on yhteensopiva Vue CLI-3:n kanssa. Se on helppo integroida, ja siinä on paljon uudelleenkäytettäviä käyttöliittymäkomponentteja, kuten karuselleja, navigaatioita ja kortteja. Vuetify on avoimen lähdekoodin ja yli 29 319,170 tähteä Githubissa ja XNUMX XNUMX viikoittaista latausta NPM:llä.

 

3. Chakra UI Vue

 

Chakra UI on yksinkertainen modulaarinen ja helppokäyttöinen komponenttikirjasto, joka antaa sinulle työkalut Vue-sovellusten rakentamiseen nopeasti ja helposti.

 

Kaikki komponentit ovat saatavilla (se noudattaa tiukasti WAI-ARIA-standardeja), teemallisia ja koostettavia. Se tukee reagoivia tyylejä heti valmiina ja on yhteensopiva pimeän tilan kanssa.

 

Chakra UI sisältää myös joukon asettelukomponentteja, kuten CBox ja CStack, joiden avulla on helppo muotoilla komponentteja välittämällä rekvisiitta. Sen avulla voit myös tuoda Chakra UI Vue -komponentteja automaattisesti käyttämällä webpack-laajennusratkaisua. Se on avoimen lähdekoodin, ja siinä on yli 900 tähteä Githubissa ja 331 viikoittaista latausta NPM:llä.

 

4. Bootstrap Vue

 

BootstrapVue, BootstrapVuen avulla voit rakentaa responsiivisia, mobiililähtöisiä ja ARIA-saatavia projekteja verkossa Vue.js:n ja suositun CSS-etukirjaston Bootstrapin avulla. Dokumentaatio on helppo ymmärtää ja se on myös helppo asentaa. Se nopeuttaa etupään toteutukset.

 

Se tarjoaa yli 85 komponenttia, yli 45 saatavilla olevaa laajennusta, useita direktiivejä ja yli 1000 kuvaketta. Se tarjoaa myös toiminnallisia komponentteja, jotka on räätälöity asetteluihin ja reagoivaan suunnitteluun. Voit myös helposti integroida BootstrapVuen Nuxt.js-projekteihisi Nuxt.js-moduulin avulla.

 

Sitä käytetään myös samalla tavalla kuin bootstrap CSS -kehystä. Se on avoimen lähdekoodin Githubissa noin 12.9 1.7 tähteä ja XNUMX XNUMX haarukka.

 

5. Vuesax

 

Vuesax on uusi käyttöliittymäkomponenttikehys, joka on luotu Vuejsin avulla projektien tekemiseen helposti ja ainutlaatuisella ja miellyttävällä tyylillä. Vuesax on luotu tyhjästä ja suunniteltu kaiken tyyppisille kehittäjille käyttöliittymän rakastajista taustajärjestelmään, joka haluaa helposti luoda visuaalisen lähestymistapansa loppukäyttäjälle. Suunnittelut ovat ainutlaatuisia jokaiselle komponentille, eivätkä ne ole ankkuroitu mihinkään visuaaliseen trendiin tai suunnittelun sääntöihin, mikä tekee myös sillä rakennetuista projekteista ainutlaatuisia.

 

se tarjoaa responsiivisia sivuja sekä uudelleenkäytettäviä ja muokattavia käyttöliittymäkomponentteja. On myös helppo aloittaa joko npm:n tai CDN:n käyttäminen. Se ei tällä hetkellä tue Vue CLI 3:a uusimmassa versiossaan. Se on avoimen lähdekoodin Githubissa noin 4.9 6700 tähteä ja XNUMX XNUMX viikoittaista latausta NPM.

 

6. Ant Design Vue

 

Ant Design vue perustuu Ant Design -spesifikaatioon, Ant design vue on vue-käyttöliittymäkirjasto, joka sisältää joukon korkealaatuisia komponentteja ja demoja monipuolisten, interaktiivisten käyttöliittymien rakentamiseen.

 

Ant-design-vue tarjoaa runsaasti käyttöliittymäkomponentteja, jotka rikastuttavat verkkosovelluksiasi, kuten Skeleton, vetolaatikko, tilastot ja paljon muuta.

 

Ant design vue -version 2 äskettäisen julkaisun myötä se on päivitetty nopeammaksi ja helpommin integroitavaksi, pienemmäksi nippukokoiseksi ja tukee myös Vue 3:a, New Composition API -asiakirjaa. Se tukee myös nykyaikaisia ​​verkkoselaimia, palvelinpuolen renderöintiä ja elektroneja. Sillä on yli 13 39,693 tähteä Githubissa ja XNUMX XNUMX viikoittaista latausta NPM.

 

7. Kvasaari

 

Quasar on yksi parhaista Vue UI -kehyksistä, jonka avulla kehittäjät voivat käyttää yhtä lähdekoodipohjaa kaikille alustoille Quasar CLI:n kautta parhaiden käytäntöjen avulla. Sen avulla kehittäjät voivat keskittyä sovelluksensa sisältöön sen ympärillä olevan kaiken muun kattilapinnoitusmateriaalin (rakennusjärjestelmä, asettelu) sijaan. se on keskittynyt noudattamaan Material 2.0 -ohjeita ja sillä on myös erittäin tukeva yhteisö.

 

Yksi Quasarin erityispiirteistä on kyky kirjoittaa koodi kerran ja samanaikaisesti ottaa se käyttöön verkkosivustona, mobiilisovelluksena, joka käyttää vain yhtä koodikantaa. Tällä hetkellä beta-vaiheessa on myös uusi versio, joka tukee vue 3 -ominaisuuksia. Sillä on noin 17.8 XNUMX tähteä Githubissa.

 

8. Buefy

 

Buefy on kevyt käyttöliittymäkomponenttikirjasto Vue JS:lle, joka perustuu Bulmaan (CSS-kehys). Buefy yhdistää Bulman Vueen, mikä auttaa sinua rakentamaan hyvännäköisiä sovelluksia minimaalisella koodilla. se on javascript-kerros Bulma-käyttöliittymällesi.

 

Se voidaan tuoda joko kokonaan tai yksittäisinä komponentteina tavalliselle verkkosivulle. Sen integrointi projektiisi on melko helppoa, se voidaan tehdä joko npm:n tai CDN:n avulla.

 

Buefy tarjoaa valmiita käyttöliittymäkomponentteja, asettelua ja kuvakkeita. Komponentit voivat käyttää SASS:ia teemassasi. Se tukee myös nykyaikaisia ​​selaimia.

 

9. Vue-materiaali

 

Vue Material on laajalti käytetty, kevyt kehys, joka toteuttaa Material Design -määritykset. Se on yksi parhaimmista integraatioista Vue.js:n ja Material Design -tietojen välillä! Voit helposti määrittää sen vastaamaan kaikkia tarpeitasi helpon API:n avulla.

 

Se on yhteensopiva responsiivisen suunnittelun ja kaikkien nykyaikaisten verkkoselaimien tuen kanssa. Kirjasto on jaettu teemoihin, komponentteihin ja käyttöliittymäelementteihin. Teemat antavat lopullisen oppaan sovelluksesi teemastamiseen (tai omien teemojen kirjoittamiseen), ja komponentit ja käyttöliittymäelementit koostuvat asetteluista, navigoinnista, typografiasta, kuvakkeista ja 30 muusta komponentista. Siinä on noin 9.2 1.1 tähteä ja 21 XNUMX haarukka Githubissa ja XNUMX XNUMX + viikoittainen lataus NPM.

 

10. KeenUI

 

KeenUI on kevyt vue.js-käyttöliittymäkirjasto, jossa on yksinkertainen API ja joka on saanut inspiraationsa Googlen materiaalisuunnittelusta. Keen UI ei ole CSS-kehys. Siksi se ei sisällä tyylejä ruudukkojärjestelmälle, typografialle jne. Sen sijaan painopiste on interaktiivisissa komponenteissa, jotka vaativat Javascriptin.

 

Siinä on noin 30 uudelleenkäytettävää komponenttia. Komponentit ovat mukautettavissa ohittamalla tyylit SASS-muuttujien avulla. voit integroida sen projektiisi joko CDN:n tai npm:n avulla. Se on avoimen lähdekoodin ja sillä on noin 4k tähteä Githubissa.

 

Yhteenveto

 

Käyttöliittymäkomponenttikirjastot tekevät projektin rakentamisesta paljon helpompaa. Oikean valinta riippuu sen projektin ominaisuuksista, jota haluat työstää. Ennen kuin sukeltaa uuteen projektiin, on suositeltavaa tarkistaa käyttöliittymäkomponenttikirjasto, joka sopii tähän tarkoitukseen parhaiten.