Crea proyectos basados en Vue 3 con Vite
- Con la salida de Vue 3 a la vuelta de la esquina (en el momento de esta grabación), vamos a retomar la serie de Vue 3 y seguir explorando sus nuevas características.
- Es posible que estés tan acostumbrado/a a Vue CLI que no sepas que existe una alternativa, pensada específicamente para Vue 3. Es decir, que no funcionará con versiones anteriores de Vue ni con componentes y librerías que no sean compatibles con Vue 3.
- El nombre de la alternativa es Vite y creo que te va a encantar. Primero de todo: no usa Webpack 🤟 sino imports nativos de módulos ES, por lo que es muy rápido porque no tiene que procesarlos para que el navegador los entienda. Eliminamos un intermediario.
- Cuando llega el momento de compilar para producción, eso sí, usa una configuración muy personal de Rollup.
- Vamos a crear un proyecto con Vite a través de
npm init vite-app test-app
. Si lo abrimos en nuestro editor y examinamospackcage.json
verás que usamos la versión candidata de Vue 3 y tenemos dos tareas,dev
ybuild
. Bastante auto-explicativo. - Si tras instalar las dependencias con
npm install
, probamos a lanzar un servidor de desarrollo connpm run dev
verás que es casi instantáneo. - Como indica en la página de inicio vamos a abrir el componente
HelloWorld.vue
para probar su HMR. También es extremadamente rápido. - No se si ta has dado cuenta de algo. Con Vue 3 ya no es necesario tener un único elemento de raíz en tus
templates
. Algo que no es matador pero, ¿cuántos div cuya única finalidad es hacer de padre has tenido que añadir para que todo funcione?. - En próximas lecciones del curso de Vue 3 hablaremos de esta y otras características de la nueva versión de nuestro framework favorito.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?
Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.