vitesse

Vitesse es una plantilla de inicio altamente opinada para construir aplicaciones web con Vite y Vue 3, creada por Anthony Fu. Su objetivo es proporcionar una configuración rápida y preconfigurada para que los desarrolladores puedan convertir rápidamente ideas en aplicaciones funcionales sin perder tiempo en configuración. La plantilla está diseñada para la velocidad, aprovechando herramientas modernas como pnpm, esbuild y Vite, e incluye un conjunto seleccionado de características y complementos listos para usar. **Características clave** - **Vue 3 + Vite**: Construida sobre Vue 3 con Vite para tiempos de desarrollo y compilación rápidos. - **Enrutamiento basado en archivos**: Usa `unplugin-vue-router` para la generación automática de rutas desde el directorio `src/pages`. - **Autoimportaciones**: Componentes, API (por ejemplo, Composition API) e iconos se importan automáticamente, reduciendo el código repetitivo. - **Gestión de estado**: Pinia para una gestión de estado intuitiva y segura de tipos. - **Sistema de diseños**: Soporta múltiples diseños mediante `vite-plugin-vue-layouts`. - **Soporte PWA**: Integrado con `vite-plugin-pwa` para capacidades de aplicaciones web progresivas. - **Estilos**: UnoCSS para CSS atómico instantáneo bajo demanda, con soporte para cualquier conjunto de iconos mediante Iconify. - **Internacionalización**: Vue I18n con `unplugin-vue-i18n` para soporte multilingüe. - **Markdown**: Escribe Markdown como componentes Vue usando `unplugin-vue-markdown` con resaltado de sintaxis Shiki. - **SSG**: Generación de sitios estáticos mediante `vite-ssg`, con optimización de CSS crítico usando `beasties`. - **Pruebas**: Vitest para pruebas unitarias y Cypress para pruebas E2E, integradas con GitHub Actions. - **TypeScript**: Soporte completo de TypeScript. - **Despliegue**: Despliegue sin configuración en Netlify, además de soporte Docker para compilaciones de producción. **Complementos preempaquetados** - Vue Router, Pinia, VueUse, Unhead para gestión de cabeceras, y `vite-plugin-vue-devtools` para una experiencia de desarrollo mejorada. - Estilo de código impuesto con ESLint usando `@antfu/eslint-config` (comillas simples, sin punto y coma). - Extensiones de VS Code recomendadas para Vite, Volar, Iconify IntelliSense, i18n Ally y ESLint. **Variaciones** La plantilla ha inspirado varias variaciones mantenidas por la comunidad, incluyendo: - `vitesse-lite`: Versión ligera. - `vitesse-nuxt3`: Para Nuxt 3. - `vitesse-webext`: Para extensiones de navegador. - `vitesse-ssr-template`: Con soporte SSR. - `vitailse`: Con TailwindCSS. - `vitesse-h5`: Para aplicaciones móviles. - `vitesse-solid`: Para SolidJS. **Uso** - **Desarrollo**: Ejecuta `pnpm dev` y visita `http://localhost:3333`. - **Compilación**: Ejecuta `pnpm build` para generar una carpeta `dist`. - **Despliegue**: Despliega en Netlify conectando el repositorio, o usa Docker con `docker buildx build . -t vitesse:latest` y ejecuta con `docker run --rm -it -p 8080:80 vitesse:latest`. **Nota**: El autor recomienda usar Nuxt para proyectos nuevos debido a una mejor experiencia de desarrollo en Vue y un mantenimiento más consistente, ya que Vitesse es del período temprano de transición de Vite/Vue 3 y las actualizaciones pueden ser más lentas. Sin embargo, sigue siendo una referencia sólida para aprender y para proyectos que se alineen con su configuración opinada. **Lista de verificación para personalización** Al usar la plantilla, actualiza el nombre del autor en `LICENSE`, el título en `App.vue`, el nombre de host en `vite.config.ts`, el favicon en `public`, elimina la carpeta `.github` y limpia los README y rutas. En general, Vitesse es una plantilla potente y rica en funciones para desarrolladores que quieren una configuración completa y opinada para aplicaciones Vue 3, con un enfoque en la velocidad y la experiencia del desarrollador.