La mayoría de los proyectos que los desarrolladores de Vue crean lo hacen utilizando el CLI de Vue con Webpack, pero recientemente Evan You, el creador de Vue desarrolló una nueva herramienta llamada Vite que proporciona una estructura de proyecto básico y un servidor de desarrollo similar a Vue-CLI pero de 10 a 100 veces más rápido.

Vite es una herramienta de frontend que ayuda a crear proyectos de forma que no tengas que estar atado a ningún framework en concreto y que su desarrollo y construcción final sea lo más sencilla posible. Vite actualmente soporta tanto proyectos Vanilla JS, Vue, React, entre otros.

Como crear un proyecto Vue con Vite

Es muy sencillo, antes de comenzar debemos comprobar la versión de npm que tenemos instalada.

$ npm -v
# npm 6.x

Según la versión instalamos de una forma u otra.

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

Si preferimos yarm

# yarn
yarn create vite my-vue-app --template vue

Aquí le estamos diciendo que inicie un proyecto con la última versión de Vite llamado vue-vite utilizando la plantilla de Vue. Al finalizar la instalación debemos ver un resultado muy similar al siguiente:

 npx: instaló 6 en 30.733s

Scaffolding project in /home/roy/Proyectos/estudio/roylans.dev/vue-vite...

Done. Now run:

$ cd vue-vite
$ npm install
$ npm run dev

Ejecutamos los tres comandos en el mismo orden:

• Accedemos al directorio.
• Instalamos todas las dependencias .
• Por último ejecutamos el proyecto.

Como se habrán dado cuenta el proyecto se ejecutó ridículamente rápido, en mi caso solo demoró 277 ms como se ve en la siguiente imagen.

Seguido nos vamos al navegador y llamados la siguiente url: localhost:3002

Si todo fue bien deberíamos de estar viendo una página como la siguiente:

De esta forma hemos creado un proyecto con Vite y Vue3 de forma muy sencilla. Cada vez que realicemos cambios en el proyecto podemos comprobar que el navegador se recarga y actualiza con los últimos cambios a una velocidad asombrosa.

Estructura del proyecto

La estructura de un proyecto de Vue3 creado con Vite es idéntica a la estructura tradicional con webpack con la única diferencia del archivo de configuración que llama vite.conf.js

A tener en cuenta

No todo es color de rosa, también hay algunas desventajas que debemos conocer.

• Vite usa módulos de JavaScript por lo que las dependencias también deberían usarlas.
• Vite puede transformar CommonJS en módulos JavaScript, exceptos algunos caso extremos.
• Vite no puede crear paquetes destinados a navegadores antiguos.

Hasta aquí esta pequeña guía para crear un proyecto de Vue con Vite. Si quieres profundizar te recomiendo echarle un ojo a la documentación oficial.