15 de las bibliotecas de componentes de Vue UI más interesantes para 2021

15 de las bibliotecas de componentes de Vue UI más interesantes para 2021

Bibliotecas de componentes de interfaz de usuario de Vue interesantes

“¿Por qué molestarse con las bibliotecas de componentes de Vue UI?” Bueno, Vue, o Vue.js, es una biblioteca de JavaScript popular que puede usar para crear aplicaciones dinámicas en el front-end. Desde sus humildes comienzos en 2014, ha crecido en los últimos dos años. Vue, el framework JavaScript progresivo, se ha convertido en el principal competidor de Angular y React, y una de las razones de la popularidad de Vue es la gran uso de componentes, que hacen que el desarrollo sea mucho más fácil de entender.

En este articulo, cubrimos algunas de las bibliotecas de componentes de Vue UI más interesantes que deberías examinar primero. ¡Definitivamente serán útiles si tiene una aplicación Vue en proceso!

👉 Nota para principiantes: ¿Qué es un componente de Vue?

ver kit de hardware

Vue Material Kit es un gran atajo que puede utilizar para acelerar su proceso de diseño / desarrollo al crear nuevos sitios web o aplicaciones web. Se requieren conocimientos básicos de JavaScript, Vuejs y Vue Router, pero aparte de eso, el paquete es bastante fácil de entender y hermoso.

El kit incluye 60 componentes hechos a mano, dos complementos personalizados y tres páginas de ejemplo.

Página de inicio de Vuetify

Vuetify es un marco en Vue, que te permite crear componentes de interfaz de usuario limpios, semánticos y reutilizables. Funciona con la representación del lado del servidor (SSR) de Vue.

Lo que hace que Vuetify sea una opción atractiva entre las mejores bibliotecas de componentes de la interfaz de usuario de Vue es la disponibilidad de un andamio listo para usar para el código, en forma de plantillas vue-cli prediseñadas. Le ayuda a comenzar rápidamente. Vuetify también tiene una buena comunidad y actualizaciones periódicas.

Buefy

Buefy es una biblioteca de componentes de interfaz de usuario liviana basada en Vue y Bulma, un marco CSS. Este marco, aunque se suministra con Bulma, tiene menos de 100 KB.

Si se siente cómodo con SASS, se sentirá como en casa con Similitudes de Buefy con SASS. Dicho esto, aunque Buefy proporciona una lista lista de componentes para usar en una aplicación para principiantes, es posible que le resulte insuficiente si está trabajando en un proyecto grande.

Ver material

Vue Material es una biblioteca escalable construida con las últimas especificaciones de diseño de Google. La biblioteca contiene componentes útiles para facilitar el proceso de creación de capas de aplicaciones complejas.

Con más de 1,7 millones de descargas, ofrece una biblioteca ligera para crear aplicaciones que se adaptan a cualquier pantalla. La biblioteca de materiales de Vue es compatible con los navegadores web modernos y su API es adecuada para principiantes, lo que la hace perfecta para nuestra lista de 2020.

UI de pescado

Fish UI es un kit de herramientas de biblioteca de componentes de UI de Vue liviano, con soporte para webpack y ES2015.

En el momento de escribir este artículo, este proyecto solo tiene cinco contribuyentes. Sin embargo, ha habido actividad en el último mes lo que sugiere que todavía está activo. Puedes ir a documentación del proyecto ¡intentar!

Quásar

Quasar es un marco de interfaz de usuario basado en Vue. Debe tener esto en cuenta si planea trabajar en aplicaciones web y móviles receptivas. Es un marco completo que admite funciones como minificación y almacenamiento en caché, además de componentes para su marco. En mayo de 2020, hay más 14.6k estrellas en GitHub.

Quasar es quizás la más completa de todas las bibliotecas de componentes de Vue UI que hemos cubierto aquí. Tiene una amplia documentación y una sólida implementación de extremo a extremo.

Deseo

Vux es un marco basado en WeUI y paquete web de WeChat, además de Vue. Sin embargo, la documentación está principalmente en chino, con una mínima traducción al inglés. El enfoque principal de Vux es el rápido desarrollo de componentes móviles para su aplicación.

Aquí está una demostración en vivo de Vux, que enumera todos los componentes y cómo se representan en el navegador.

Elemento

Element es una biblioteca de componentes de IU para la web que también tiene versiones para Reaccionar y Angular, además de Vue. Esta biblioteca de componentes está diseñada específicamente para aplicaciones de escritorio, ya que sus componentes no responden.

Element también tiene una amplia documentación en chino, aunque se proporcionan traducciones al español e inglés. Los hablantes de chino no nativos deben pasar por el documentación de internacionalización antes de usar Element en sus proyectos.

Documentación de Keen UI

Keen-UI, a diferencia de la mayoría de las otras bibliotecas de componentes de Vue UI presentadas en este artículo, se centra en la interactividad a través de JavaScript en lugar de componentes visuales. Keen-UI está inspirado en Diseño de materiales de Googley viene con una API fácil de usar.

Keen UI no reitera la necesidad de ser utilizada en toda su aplicación y tiene algunos componentes útiles que se pueden colocar estratégicamente donde sea necesario. Por lo tanto, Keen UI es una buena opción cuando se agrega funcionalidad iterativa a una aplicación existente.

AT-UI

AT-UI es otra biblioteca de componentes de Vue UI con un enfoque en aplicaciones de escritorio.

AT-UI proporciona componentes de interfaz de usuario planos para sus aplicaciones web. Hay 14 colaboradores y poco apoyo disponible, aunque hay un modelo de inicio en GitHub puedes usar.

Mint-UI

Mint UI es una biblioteca de componentes ligera de Vue UI basada en el compilador de JavaScript de Babel. El pequeño tamaño de este paquete lo hace adecuado para su uso en aplicaciones móviles. La interfaz de usuario de Mint proporciona un tema similar a iOS para los componentes de su aplicación. Aquí está una demostración componentes de la interfaz de usuario de Mint.

Mint UI tiene más de 15k estrellas en GitHub. El desarrollo del marco aún está en curso, con nuevos compromisos en la sucursal principal a mediados de enero. Sin embargo, un vistazo rápido al rastreador de problemas en GitHub le dirá que Mint UI es principalmente para desarrolladores chinos.

VuePress

VuePress es un creador de sitios estáticos basado en Vue. Este marco utiliza un paquete web para crear páginas HTML estáticas renderizadas previamente (¿qué pasa con los sitios estáticos de WordPress?), Lo que acelera significativamente el procesamiento.

El uso de VuePress abre muchas posibilidades para su proyecto, como automatiza tu proceso de documentación. También es fácil de integrar en su aplicación existente. Sin embargo, una desventaja considerable es que el soporte de SEO aún es nuevo y la documentación todavía no se centra en este tema.

Eagle.js

Eagle.js es un marco en Vue que permite a los desarrolladores crear una presentación de diapositivas en una aplicación web. Hay muchos temas, animaciones, widgets y estilos para elegir y personalizar en Eagle.js.

Aunque Eagle.js proporciona una buena cantidad de ejemplos en el sitio de demostración, Documentación sigue siendo mínima. La alternativa obvia a Eagle.js es Reveal.js, un marco de JavaScript independiente para presentaciones de diapositivas web. Sin embargo, Eagle.js supera el mayor defecto de Reveal.js: la rigidez de la estructura de la presentación de diapositivas.

Bootstrap-Vue

Bootstrap-Vue trae el poder de Bootstrap, una biblioteca CSS ampliamente utilizada, a Vue. Le proporciona componentes de interfaz de usuario fácilmente disponibles y un sistema de cuadrícula, y todo es móvil y receptivo primero. Además, los componentes de esta biblioteca son compatibles con las pautas WAI-ARIA para la accesibilidad web. Fiel a la filosofía de Bootstrap de crear rápidamente componentes de interfaz de usuario, Bootstrap-Vue permite a un desarrollador iniciar rápidamente un proyecto.

los la documentación es extensa y el apoyo de la comunidad es fuerte, por lo que es una opción segura para alguien con quien comenzar un proyecto.

iView-UI

iView UI es una biblioteca en Vue que proporciona componentes y widgets de UI, con énfasis en un diseño limpio. iView tiene su propia herramienta de interfaz de línea de comandos (CLI), iView-cli, que proporciona una herramienta visual para el andamio de componentes y una versión fuera de línea de la documentación. Se mantiene activamente, con actualizaciones periódicas corrección de errores y funcionalidad añadida.

Si está utilizando iView en su proyecto, aquí hay una kit de inicio, que le ayudará a familiarizarse con el uso básico de la biblioteca.

¿Qué es un componente de Vue?

Un componente en Vue, literalmente, se refiere a una sola entidad dentro de la aplicación. Cada componente puede ser una parte gráfica de la aplicación, con su propia vista y comportamiento. Los componentes permiten la separación lógica de todos los aspectos de una aplicación Vue. Esto facilita la reutilización del código. Los componentes de Vue también ayudan a compartir entre proyectos y equipos, lo que hace que el proceso de desarrollo sea más eficiente.

Este artículo cubre los componentes principales de Vue en términos de popularidad y usabilidad.

¿Qué biblioteca de componentes de Vue UI elegir?

Aquí hemos enumerado 15 bibliotecas de componentes de Vue UI que realizan varias funciones, pero ¿cuál es mejor? Bueno, la respuesta, como siempre, es “depende”. Si desea una solución completa, es posible que desee continuar y elegir Quásar. Por otro lado, si está buscando una solución plug-and-play para sus proyectos existentes, es posible que desee seguir adelante con Vuetificar o Keen-UI.

¿Qué bibliotecas de componentes de Vue UI usas en tus proyectos? Háganos saber en sus comentarios a continuación.

También te pueden interesar estos artículos:

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

* Esta publicación contiene enlaces de afiliados, lo que significa que si hace clic en cualquiera de los enlaces de productos y luego compra el producto, recibiremos una tarifa nominal. Sin embargo, no se preocupe, seguirá pagando la cantidad estándar, por lo que no hay ningún cargo de su parte.

O inicia la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. ¡Únete a él ahora es gratis!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba