Para comenzar con Vue, solo necesitas conocimientos de JavaScript y HTML. Con estas habilidades básicas, puedes comenzar a crear aplicaciones simples en un par de horas siguiendo la guía oficial. Cada desarrollador que comienza con un nuevo proyecto sabe cuánto tiempo puede llevar el proceso de diseñar sus propios elementos de interfaz de usuario. Como todos los marcos, hay bibliotecas adicionales disponibles para aumentar el tiempo de desarrollo, como los kits de interfaz de usuario. Vue.js no es la excepción, ya que hay muchos kits de interfaz de usuario que puede comenzar a usar desde cero en su proyecto ejecutando un par de comandos en su terminal para incluirlos en su proyecto.
En este Top, hemos recopilado 20 de los kits de interfaz de usuario de código abierto más importantes que puedes comenzar a usar en tu nuevo proyecto para brindar una experiencia de usuario increíble y aumentar también el tiempo de desarrollo de tu proyecto. ¡Disfrútalas!
20. Office UI Fabric Vue
Este marco es una implementación de Office UI Fabric para Vue.js, creada con office-ui-fabric-js, una colección de componentes de JavaScript para crear experiencias para Office y Office 365.
19. Vuestrap
Los componentes base de Vuestrap amplían Bootstrap 4. Construido con vuestrap, Vue.js simple y Webpack.
18. Semantic UI
Semantic UI Vue es la integración de Vue para Semantic UI. Está muy inspirado en Semantic UI React. Si ya lo has usado, encontrarás que la API de Semantic UI Vue es casi la misma. Semantic UI Vue todavía está en un gran desarrollo. Por favor, siéntete libre de contribuir.
17. VueBoot
VueBoot es un proyecto diseñado para facilitar el uso de Bootstrap en aplicaciones VueJS. Se adopta el enfoque de que el equipo de Bootstrap ha trabajado mucho y reproducir ese trabajo está más allá del alcance de este proyecto. Por eso, elegimos usar el javascript oficial de Bootstrap y simplemente envolver la API en una envoltura delgada de VueJS.
16. Framevuerk
Framevuerk, es un marco de interfaz de usuario configurable, compatible con múltiples idiomas y receptivo basado en Vue.js con un nombre impresionante.
15. Vue-Material
Vue material es un kit de interfaz de usuario útil para diseñar y crear hermosas aplicaciones con Material Design y Vue.js. Está bien diseñado, por lo que puedes crear aplicaciones que se adapten a todas las pantallas y sean compatibles con todos los navegadores web modernos.
14. N3-Components
La biblioteca de componentes N3 está construida con Vue.js, es una biblioteca poderosa para que los ingenieros de frontend o full-stack creen páginas web rápidamente. Los componentes de N3 se aplican a estructurar un gran círculo ecológico de desarrolladores usando Vue.js. Apoyando de la siguiente manera:
- Más de 60 componentes. Mira aquí
- Personalidad de estilo.
- UMD.
- Usando ES6.
13. Fish UI
Fish UI es un kit de herramientas de interfaz de usuario de Vue.js 2.0 para la Web. Este marco utiliza:
- Vue.js, Moment, Vue-Router, ES6 y Babel 6
- Genial con Webpack 2.0 y Vue Loader
- Componentes CSS semánticos
- Hojas de estilo en menos
12. VUI
Un marco de interfaz de usuario para dispositivos móviles, creado con Vue. VUI proporciona componentes que se parecen a la interfaz de usuario nativa en la interfaz de usuario de iOS, Android y Windows. Sin embargo, VUI no creará esas animaciones como en Material Design.
11. Vuikit
Si bien es posible usar UIkit por sí solo al construir componentes de Vue, es posible que confíes en demasiadas dependencias y crees un contenedor para llenar el vacío lógico que falta. Vuikit resuelve todo eso al proporcionar componentes nativos, sin supervisión, que generan un diseño UIkit.
10. Muse UI
Muse UI básicamente implementa todos los componentes descritos en la guía de Material Design, y también muchos otros componentes funcionales para Vue.js. Muse UI usa menos archivos, todos los colores se administran por variable. Los temas personalizados se pueden completar escribiendo menos archivos, los componentes también proporcionan parámetros para modificar sus efectos. Muse UI está desarrollada en base a Vue2.0, Vue2.0 es actualmente uno de los frameworks front-end más rápidos, API compacta y amigable, que se puede utilizar para desarrollar aplicaciones complejas de una sola página.
9. iView
iView es un conjunto de herramientas de interfaz de usuario avanzado para Vue.js. Ofrece:
- Docenas de componentes útiles y hermosos.
- API amigable. Está hecho para personas con cualquier nivel de habilidad.
- Amplia documentación y demostraciones.
- Es bastante hermoso.
- Admite tanto Vue.js 2 como Vue.js 1.
8. Vuetify
Vuetify es un marco de componentes de material para Vue.js. Vuetify viene listo para usar con 8 plantillas vue-cli prefabricadas. Desde HTML simple hasta SSR completo, está listo para comenzar en minutos. Esté preparado para una armada de componentes especializados a su disposición. Con más de 80 en total, hay una solución para cualquier aplicación.
7. UIV (Bootstrap 3)
uiv es una biblioteca de componentes Bootstrap 3 implementada para Vue.js 2. Las características del marco:
- Ligero
- Todos los componentes ~ 20KB Gziped.
- Solo dependencias Vue y Bootstrap CSS .
- Sin CSS adicional.
- Importación individual compatible.
- Compatible con IE 9+ y navegadores modernos.
- Compatible con SSR (renderización del lado del servidor).
- Todo env soportado:
- La compilación UMD se puede utilizar en todos los entornos (incluido el navegador)
uiv.min.js - La compilación del módulo ES es para paquetes modernos como webpack 2 o rollup
uiv.esm.js - La compilación CommonJS es para paquetes más antiguos como browserify o webpack 1 .
uiv.common.js
- La compilación UMD se puede utilizar en todos los entornos (incluido el navegador)
6. Bootstrap Vue
Bootstrap-Vue proporciona una de las implementaciones más completas de los componentes y el sistema de cuadrícula de Bootstrap V4 disponibles para Vue.js 2.4+, con un marcado de accesibilidad WAI-ARIA extenso y automatizado.
5. AT UI
AT UI es una biblioteca de interfaz de usuario de interfaz de usuario ligera y modular para Vue.js. Este marco presenta:
- Residencia en
Vue - Un flujo de trabajo de desarrollo NPM + Webpack + Babel Front-End
- Apoyo
ES2015 - Estilo CSS independiente, haga interfaces de usuario consistentes (consulte: Estilo AT-UI )
- API amigable
4. Onsen UI Vue
Los enlaces de Vue para Onsen UI (VueOnsen) proporcionan componentes y directivas de Vue 2 que envuelven los componentes web centrales y exponen una API similar a Vue para interactuar con ellos.
3. Buefy
Buefy es una biblioteca liviana de componentes de interfaz de usuario receptivos para Vue.js basada en el marco y el diseño de Bulma. Este marco presenta:
- Manten tu tema / variables actuales de Bulma fácilmente
- Admite tanto los iconos de diseño de materiales como FontAwesome
- Muy ligero sin dependencias internas aparte de Vue y Bulma
- Aproximadamente 60 KB min + gzip (con Bulma incluida)
- Salida de código semántico
- Sigue el diseño de Bulma y algunos de los materiales de diseño UX
- Concéntrese en la usabilidad y el rendimiento sin sobre animar cosas
Ofrece soporte para versiones recientes de Firefox, Chrome, Edge, Opera y Safari. IE10 + solo se admite parcialmente.
2. Keen UI
Keen UI es una biblioteca de UI liviana de Vue.js con una API simple. El diseño está inspirado en Material Design de Google. Sin embargo, Keen UI no pretende ser una implementación completa de la especificación de Material Design. Keen UI no es un marco CSS. Como tal, no incluye un sistema de cuadrícula, estilos de tipografía, etc. En cambio, el enfoque está en los componentes interactivos que requieren Javascript.
1. Element
Element es una biblioteca de componentes basada en Vue 2.0 para desarrolladores, diseñadores y gerentes de productos. Este marco proporciona soporte para navegadores modernos e Internet Explorer 10+ y también ofrece una versión React y Angular. La documentación del framework está disponible en español, inglés y chino. Con Element, podrá mantener el proceso operativo simple y enunciar sus intenciones con claridad para que los usuarios puedan comprender y tomar decisiones rápidamente.
Si conoces otro marco de interfaz de usuario de código abierto impresionante para Vue.js, no seas tímido y compártelo con la comunidad en el cuadro de comentarios!
Esto podria interesarte