Vite es desarrollando por las mismas personas que desarrollaron Vue.js y a continuación vamos a ver lo sencillo que es integrar estas dos tecnologías.

Creando un proyecto con Vue

Para crear un proyecto con Vue tendríamos que usar el mismo comando que antes, npm create vite@latest o yarn create vite, pero como lo podrás suponer, escogeríamos la opción de vue.

• ? Project name: » vite-vue
• ? Select a framework: » vue
• ? Select a variant: » vue

Con esto solo faltaría instalar las dependencias y todo estaría listo para ejecutar el proyecto. Al igual que con nuestro proyecto en React, Vite emplea un plugin en vite.config.js para poder integrar Vue.

Estructura

La estructura de archivos que nos provee Vite es bastante estándar, donde primero podemos encontrar el package.json que tiene instalado vue y el plugin de vue como dependencias. Además, también podemos encontrar los siguientes archivos:

Carpeta public

La carpeta public contiene un icono. Mientras el proyecto avance se guardaran archivos estáticos, los cuales en producción estarían del lado del servidor.

index.html

En el index.html podemos encontrar un div con el id app, el cual referencia todo nuestro proyecto. Además, también encontramos un script que a diferencia de React usa solamente js y no jsx.

src

En la carpeta src destacan los siguientes archivos:

• El main.js importa la capacidad de generar proyectos con Vue.js e importa App, el primer componente de nuestro proyecto.

• En App.vue podemos encontrar una sección de código en js, la sección de template la cual muestra el código se va a dibujar nuestra página y la sección de estilos.

• Tenemos el componente HelloWorld.vue en la carpeta de componentes, el cual guarda el código necesario para que el contador funcione.

Conclusión

Como puedes ver, la integración fue bastante fácil. Vue.js es un framework elegante, por lo que si te intereso te recomiendo visitar los cursos de Diana Martínez y la ruta de Vue.js que Platzi tiene.

Contribución creada por: Jofay Zhan Segura