Vue JS é un marco JavaScript progresivo que se usa para desenvolver aplicacións dunha soa páxina (SPA) e interfaces de usuario. E é un dos frameworks front-end máis utilizados.
Unha característica interesante de Vue é a súa capacidade para dividir unha páxina web en diferentes compoñentes. E este proceso faise máis sinxelo co uso das bibliotecas de compoñentes da IU.
Existen varias bibliotecas de compoñentes da IU que poden axudarche a crear compoñentes de xeito sinxelo e rápido. Entón, neste blog, imos revisar as 10 principais bibliotecas de compoñentes de Vue UI para 2021.
1. PrimeVue
PrimeVue é unha biblioteca de compoñentes Vue UI sinxela de usar, versátil e eficiente que che axuda a crear interfaces de usuario fantásticas.
Ten máis de 80 compoñentes de IU con soporte total para as directrices de accesibilidade ao contido web (WCAG) e un deseño receptivo. E grazas a unha actualización recente, a biblioteca agora ten soporte completo para Vue 3. Tamén ten moitos compoñentes máis.
Unha das mellores cousas de Primevue é a súa ampla gama de compoñentes. Van desde táboas e paginadores ata organigramas ben elaborados baseados en gráficos que podes usar para crear aplicacións Vue interactivas. É de código aberto e ten máis de 1 estrelas en Github e 6,983 descargas semanais en NPM.
2. Vuetify
Vuetify é unha biblioteca de interface de usuario de Vue con compoñentes artesanais que usa a especificación de deseño de materiais. Isto significa que foi desenvolvido exactamente de acordo coas especificacións de deseño de materiais con cada compoñente meticulosamente elaborado para ser modular, sensible e de alto rendemento.
Vuetify permíteche personalizar as túas aplicacións con deseños únicos e dinámicos e perfeccionar os estilos dos teus compoñentes mediante variables SASS.
Tamén admite pautas de accesibilidade, todos os navegadores modernos e é compatible con Vue CLI-3. É doado de integrar e ten moitos compoñentes de IU reutilizables como carruseles, navegacións e tarxetas. Vuetify é de código aberto e con máis de 29 estrelas en Github e 319,170 descargas semanais en NPM.
3. Chakra UI Vue
Chakra UI é unha simple biblioteca de compoñentes modulares e accesibles que che ofrece as ferramentas para crear aplicacións Vue de forma rápida e sinxela.
Todos os compoñentes son accesibles (seguindo estrictamente os estándares WAI-ARIA), temáticas e compoñebles. Admite estilos receptivos listos para usar e é compatible co modo escuro.
Chakra UI tamén contén un conxunto de compoñentes de deseño como CBox e CStack que facilitan o estilo dos seus compoñentes pasando accesorios. Tamén che permite importar automaticamente os compoñentes de Chakra UI Vue usando unha solución de complemento webpack. É de código aberto e ten máis de 900 estrelas en Github e 331 descargas semanais en NPM.
4. Bootstrap Vue
BootstrapVue, con BootstrapVue podes crear proxectos na web sensibles, adaptados aos móbiles e accesibles a ARIA usando Vue.js e a popular biblioteca CSS de interface: Bootstrap. A documentación é fácil de entender e tamén é fácil de configurar. Fai que as implementacións front-end sexan máis rápidas.
Ofrece máis de 85 compoñentes, máis de 45 complementos dispoñibles, varias directivas e máis de 1000 iconas. Tamén fornece compoñentes funcionais adaptados para deseños e deseño responsive. tamén podes integrar facilmente BootstrapVue nos teus proxectos Nuxt.js usando o módulo Nuxt.js.
Tamén se usa do mesmo xeito que se usa o marco CSS de arranque. É de código aberto en Github con preto de 12.9k estrelas e 1.7k forks.
5. Vuesax
Vuesax é un novo marco de compoñentes de IU creado con Vuejs para facer proxectos facilmente e cun estilo único e agradable. o usuario final. Os deseños son únicos para cada compoñente e non están ancorados a ningunha tendencia visual ou regras de deseño, polo que os proxectos construídos con el tamén son únicos.
ofrece páxinas sensibles e compoñentes de IU reutilizables e personalizables. Tamén é sinxelo comezar usando npm ou CDN. Actualmente non admite Vue CLI 3 na súa versión recente. É de código aberto en Github con preto de 4.9 mil estrelas e 6700 descargas semanais NPM.
6. Ant Design Vue
Ant Design vue baseado na especificación Ant Design, Ant design vue é unha biblioteca de interface de usuario de vue que contén un conxunto de compoñentes e demostracións de alta calidade para crear interfaces de usuario ricas e interactivas.
Ant-design-vue ofrece moitos compoñentes de IU para enriquecer as túas aplicacións web, como Skeleton, caixón, estatísticas e moito máis.
Co lanzamento recente da versión 2 de ant design vue, actualizouse para que sexa máis rápido e fácil de integrar, un paquete de tamaño máis pequeno e tamén admite Vue 3, o documento da API de New Composition. Tamén admite navegadores web modernos, renderizado no servidor e electrón. Ten máis de 13 estrelas en Github e 39,693 descargas semanais NPM.
7. Quasar
Quasar é un dos mellores marcos de interface de usuario de Vue que permite aos desenvolvedores utilizar unha base de código fonte para todas as plataformas a través da CLI de Quasar coas mellores prácticas. Permite aos desenvolvedores centrarse no contido da súa aplicación en lugar de todo o resto de elementos (sistema de construción, deseño) ao seu redor. está enfocado a seguir as directrices do Material 2.0 e tamén conta cunha comunidade moi solidaria.
Unha das cousas especiais de Quasar é a capacidade de escribir código unha vez e implementalo simultaneamente como un sitio web, unha aplicación móbil usando só unha base de código. Tamén hai unha nova versión actualmente en beta que admitiría as funcións de vue 3. Ten preto de 17.8k estrelas en Github.
8. Buefy
Buefy é unha biblioteca de compoñentes de IU lixeira para Vue JS baseada en Bulma (un marco CSS). Buefy combina Bulma con Vue, axudándoche a crear aplicacións atractivas utilizando un código mínimo. é a capa de javascript para a túa interface de Bulma.
Pódese importar completamente ou só compoñentes nunha páxina web normal. Integralo no teu proxecto é bastante sinxelo, pódese facer usando npm ou CDN.
Buefy ofrece compoñentes da interface de usuario, deseño e iconas preparados. Os compoñentes poden usar SASS para o teu tema. Tamén admite navegadores modernos.
9. Vue Material
Vue Material é un marco lixeiro e amplamente utilizado que implementa as especificacións de Material Design. É unha das mellores integracións entre Vue.js e as especificacións de Material Design. Podes configuralo facilmente para satisfacer todas as túas necesidades a través dunha API sinxela.
É compatible con deseño responsivo e compatibilidade con todos os navegadores web modernos. A biblioteca divídese en Temas, Compoñentes e Elementos da IU. Os temas ofrecen unha guía definitiva sobre como tematizar a túa aplicación (ou escribir os teus propios temas) e os compoñentes e os elementos da IU consisten en deseños, navegación, tipografía, iconas e 30 compoñentes máis. Ten preto de 9.2k estrelas e 1.1k forks en Github e 21k + descargas semanais NPM.
10. KeenUI
KeenUI é unha lixeira biblioteca de interface de usuario vue.js cunha API sinxela, inspirada no Material Design de Google. Keen UI non é un marco CSS. Polo tanto, non inclúe estilos para un sistema de cuadrícula, tipografía, etc. Pola contra, o foco está en compoñentes interactivos que requiren Javascript.
Ten uns 30 compoñentes reutilizables. Os compoñentes son personalizables substituíndo os estilos mediante variables SASS. podes integralo no teu proxecto usando CDN ou npm. É de código aberto e ten preto de 4k estrelas en Github.
Conclusión
As bibliotecas de compoñentes da interface de usuario definitivamente facilitan moito a creación dun proxecto. Escoller o correcto depende das características do proxecto no que queres traballar. Antes de mergullarse nun novo proxecto, é recomendable que revise a biblioteca de compoñentes da IU que sexa máis adecuada para o propósito.