Vite y modo desarrollo

Cuando termina de ejecutarse el comando npm install, vamos a ver que todas nuestras dependencias han sido descargadas sobre nuestra carpeta note modules. Esta carpeta note modules contiene todas las dependencias de nuestro proyecto. Por ejemplo, este componente Vue viene creado al inicio como ejemplo y hace import de estos archivos. Donde se encuentra definido Vue router, Vue router se encuentra dentro de la carpeta note modules. Si nosotros nos dirigimos a note modules y buscamos Vue router, lo encontramos. Este es un paquete de JavaScript que contiene un archivo package.json. Significa que esta dependencia de Vue router tiene a su vez otras dependencias. Estas otras dependencias se terminan instalando también sobre nuestro proyecto, por eso es que vemos muchas carpetas dentro de note modules. Si vamos a nuestro package.json principal, vamos a ver las dependencias de nuestro proyecto. Vemos que solo son tres dependencias para que nuestro proyecto funcione y luego tenemos varias dependencias de desarrollo de dependencias. Estos son más herramientas para nosotros para que nuestro desarrollo sea más fluido. Sin embargo, las dependencias requeridas para funcionar en un navegador para nuestros usuarios para producción son solo estas tres. Luego de instalar las dependencias, el siguiente comando ejecutar es npm run dev. ¿Qué hace el comando npm run dev? Eso lo podemos ver en nuestra sección de scripts de nuestro mismo archivo "package.json". "npm run dev" termina ejecutando Vite. ¿Qué es Vite? Vite es la herramienta que se encarga de construir todo nuestro proyecto y generar un archivo resultante dentro de la carpeta public. Ahora vamos a ejecutar el comando npm run dev para que se comprenda mejor esto. Luego de ejecutar el comando vemos que se termina ejecutando Vite ya que eso es lo que se encuentra definido aquí y entonces tenemos acceso a esta url local para que podamos trabajar nuestro proyecto y vayamos viendo los cambios aquí. Bien aquí nos dice "you did it", lo hiciste, has creado exitosamente un proyecto con Vite y con Vue 3 si alcanzas a ver esta pantalla felicitaciones porque ya te encuentras ejecutando tu primer proyecto de Vue 3 con Vite de manera local. Si alguna vez has escuchado hablar de webpack, Vite es una herramienta similar. Vite también tiene una documentación oficial que es "vitejs.dev", aquí se explica mejor todas las características que Vite ofrece. En nuestro caso nosotros no hemos tenido que configurar Vite desde cero porque nuestro proyecto inicial ya incluye este archivo de configuración. Nuestra configuración de Vite entonces es la configuración que se creó por defecto en una lección anterior. Lo que vemos aquí es justamente nuestro componente principal llamado app.vue. Este componente principal es un single file component. Ya hemos mencionado que los single file component son archivos que representan componentes. En este caso el componente app que representa nuestra aplicación contiene 13 etiquetas principales, una etiqueta script, una etiqueta template y una etiqueta style. La etiqueta script simplemente importa a otros componentes. La etiqueta template en este caso contiene un header y contiene un router Vue que es el encargado de mostrar la vista. Este header contiene una imagen de Vue y luego contiene un wrapper. Este wrapper a su vez contiene un componente hello world con un mensaje you did it. Este componente hello world es el que se está mostrando de este lado. En un inicio esto puede parecer confuso pero es importante explorar el proyecto inicial para que lo podamos modificar a nuestro gusto. Por ahora debes tener en cuenta que este componente app contiene en su interior un componente hello world que está definido en la carpeta de components. Aquí tenemos hello world. Este componente hello world lo único que hace es imprimir dentro de un h1 un h2 un mensaje que se recibe a través de props. Los props son la forma de comunicar datos desde un componente padre hacia un componente hijo. En este caso nuestro componente app está comunicando un prop o una propiedad MSG hacia el componente hijo Hello World. El componente hijo lo recibe y lo imprime dentro de un h1. ¿Qué significa esto? Que podemos modificar este texto, guardamos y como vemos aquí el texto ha cambiado. No hemos tenido que ejecutar ningún comando porque el comando npm run dev automáticamente se encuentra observando los cambios que ocurren en nuestro proyecto. Esto es gracias a Vite. Entonces a lo largo del curso a medida que hagamos cambios, mientras no hayan errores, estos cambios se van a ver reflejados inmediatamente en nuestra página, en el navegador.

Crea una cuenta y continúa aprendiendo 🚀

Vite y modo desarrollo