Vue JS és un marc de JavaScript progressiu que s'utilitza per desenvolupar aplicacions d'una sola pàgina (SPA) i interfícies d'usuari. I és un dels frameworks de front-end més utilitzats que hi ha.
Una característica interessant de Vue és la seva capacitat per descompondre una pàgina web en diferents components. I aquest procés es fa més senzill amb l'ús de biblioteques de components d'IU.
Hi ha diverses biblioteques de components d'IU que us poden ajudar a crear components de manera fàcil i ràpida. Així, en aquest bloc, revisarem les 10 biblioteques de components de la interfície d'usuari principals de Vue per al 2021.
1. PrimeVue
PrimeVue és una biblioteca de components Vue UI senzilla d'utilitzar, versàtil i eficient que us ajuda a crear interfícies d'usuari increïbles.
Té més de 80 components d'interfície d'usuari amb total suport per a les directrius d'accessibilitat de contingut web (WCAG) i un disseny responsive. I gràcies a una actualització recent, la biblioteca ara té suport complet per a Vue 3. També té molts més components.
Una de les millors coses de Primevue és la seva àmplia gamma de components. Van des de taules i paginadors fins a organigrames ben elaborats basats en gràfics que podeu utilitzar per crear aplicacions Vue interactives. És de codi obert i té més d'1k estrelles a Github i 6,983 descàrregues setmanals a NPM.
2. Vuetify
Vuetify és una biblioteca d'interfície d'usuari de Vue amb components artesanals meravellosos que utilitza l'especificació de disseny de materials. Això vol dir que s'ha desenvolupat exactament d'acord amb les especificacions de Material Design amb cada component meticulosament dissenyat per ser modular, sensible i de rendiment.
Vuetify us permet personalitzar les vostres aplicacions amb dissenys únics i dinàmics i perfeccionar els estils dels vostres components mitjançant variables SASS.
També admet les directrius d'accessibilitat, tots els navegadors moderns i és compatible amb Vue CLI-3. És fàcil d'integrar i té molts components d'IU reutilitzables, com ara carrusels, navegacions i targetes. Vuetify és de codi obert i amb més de 29 estrelles a Github i 319,170 descàrregues setmanals a NPM.
3. Chakra UI Vue
Chakra UI és una biblioteca de components senzilla, modular i accessible que us ofereix les eines per crear aplicacions Vue de manera ràpida i senzilla.
Tots els components són accessibles (segueix estrictament els estàndards WAI-ARIA), temables i componibles. Admet estils de resposta des de la caixa i és compatible amb el mode fosc.
Chakra UI també conté un conjunt de components de disseny com CBox i CStack que faciliten l'estil dels vostres components passant accessoris. També us permet importar automàticament els components de Chakra UI Vue mitjançant una solució de connectors webpack. És de codi obert i té més de 900 estrelles a Github i 331 descàrregues setmanals a NPM.
4. Bootstrap Vue
BootstrapVue, amb BootstrapVue podeu crear projectes responsius, primer mòbils i accessibles a ARIA al web mitjançant Vue.js i la popular biblioteca CSS de front-end: Bootstrap. La documentació és fàcil d'entendre i també és fàcil de configurar. Fa que les implementacions de front-end es facin més ràpid.
Ofereix més de 85 components, més de 45 connectors disponibles, diverses directives i més de 1000 icones. També proporciona components funcionals adaptats per a dissenys i disseny responsive. també podeu integrar fàcilment BootstrapVue als vostres projectes Nuxt.js mitjançant el mòdul Nuxt.js.
També s'utilitza de la mateixa manera que s'utilitza el marc CSS d'arrencada. És de codi obert a Github amb unes 12.9 k estrelles i 1.7 k forks.
5. Vuesax
Vuesax és un nou marc de components d'interfície d'usuari creat amb Vuejs per fer projectes fàcilment i amb un estil únic i agradable, vuesax es crea des de zero i està dissenyat per a tot tipus de desenvolupadors, des dels amants del frontend fins al backend que volen crear fàcilment el seu enfocament visual a l'usuari final. Els dissenys són únics per a cada component i no estan ancorats a cap tendència visual o regla de disseny, fent que els projectes construïts amb ell també siguin únics.
ofereix pàgines sensibles i components d'IU reutilitzables i personalitzables. També és fàcil començar amb npm o CDN. Actualment no és compatible amb Vue CLI 3 a la seva versió recent. És de codi obert a Github amb unes 4.9 mil estrelles i 6700 descàrregues setmanals NPM.
6. Ant Design Vue
Ant Design vue basat en l'especificació Ant Design, Ant design vue és una biblioteca d'interfície d'usuari vue que conté un conjunt de components i demostracions d'alta qualitat per crear interfícies d'usuari interactives riques.
Ant-design-vue ofereix molts components d'IU per enriquir les vostres aplicacions web com Skeleton, calaix, estadístiques i molt més.
Amb el llançament recent de la versió 2 de ant design vue, s'ha actualitzat per ser més ràpid i fàcil d'integrar, una mida de paquet més petita i també és compatible amb Vue 3, document de l'API de composició nova. També admet navegadors web moderns, renderització del costat del servidor i electron. Té més de 13 estrelles a Github i 39,693 descàrregues setmanals NPM.
7. Quasar
Quasar és un dels millors marcs d'interfície d'usuari de Vue que permet als desenvolupadors utilitzar una base de codi font per a totes les plataformes mitjançant Quasar CLI amb les millors pràctiques de manera immediata. Permet als desenvolupadors centrar-se en el contingut de la seva aplicació en comptes de totes les altres coses de revestiment de caldera (sistema de construcció, disseny) al seu voltant. està enfocat a seguir les directrius del Material 2.0 i també té una comunitat molt solidària.
Una de les coses especials de Quasar és la capacitat d'escriure codi una vegada i desplegar-lo simultàniament com a lloc web, una aplicació mòbil utilitzant només una base de codi. També hi ha una nova versió en beta que admetria les funcions de vue 3. Té unes 17.8 mil estrelles a Github.
8. Buefy
Buefy és una biblioteca de components d'interfície d'usuari lleugera per a Vue JS basada en Bulma (un marc CSS). Buefy combina Bulma amb Vue, ajudant-vos a crear aplicacions atractives amb codi mínim. és la capa de javascript per a la vostra interfície de Bulma.
Es pot importar completament o components individuals en una pàgina web normal. Integrar-lo al vostre projecte és bastant fàcil, es pot fer amb npm o CDN.
Buefy ofereix components, disseny i icones de la interfície d'usuari ja fets. Els components poden utilitzar SASS al vostre tema. També admet navegadors moderns.
9. Vue Material
Vue Material és un marc lleuger i àmpliament utilitzat que implementa les especificacions de Material Design. És una de les millors integracions entre les especificacions de Vue.js i Material Design! Podeu configurar-lo fàcilment per satisfer totes les vostres necessitats mitjançant una API senzilla.
És compatible amb el disseny responsiu i el suport per a tots els navegadors web moderns. La biblioteca es divideix en Temes, Components i Elements d'IU. Els temes ofereixen una guia definitiva sobre com tema la vostra aplicació (o escriure els vostres propis temes) i els components i els elements de la IU consisteixen en dissenys, navegació, tipografia, icones i 30 components més. Té unes 9.2 k estrelles i 1.1 k forks a Github i 21 k + descàrregues setmanals NPM.
10. KeenUI
KeenUI és una biblioteca d'interfície d'usuari vue.js lleugera amb una API senzilla, inspirada en el disseny de materials de Google. Keen UI no és un marc CSS. Per tant, no inclou estils per a un sistema de quadrícula, tipografia, etc. En canvi, l'atenció se centra en components interactius que requereixen Javascript.
Té uns 30 components reutilitzables. Els components es poden personalitzar anul·lant els estils mitjançant variables SASS. podeu integrar-lo al vostre projecte mitjançant CDN o npm. És de codi obert i té unes 4 estrelles a Github.
Conclusió
Les biblioteques de components de la interfície d'usuari fan que la creació d'un projecte sigui molt més fàcil. Escollir l'adequat depèn de les característiques del projecte en què voleu treballar. Abans d'endinsar-se en un projecte nou, és recomanable que revisi la biblioteca de components de la interfície d'usuari que s'adapti més a aquest propòsit.