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 examinamos packcage.json verás que usamos la versión candidata de Vue 3 y tenemos dos tareas, dev y build. Bastante auto-explicativo.
Si tras instalar las dependencias con npm install, probamos a lanzar un servidor de desarrollo con npm 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.

Crea proyectos basados en Vue 3 con Vite

¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?

Recibe novedades en tu 📬