Repaso e Introducción

Hagamos un breve repaso de nuestro proyecto, empezando por revisar nuestra configuración de "vite". "Vite" es la herramienta que estamos usando para compilar nuestro código JavaScript. Nosotros desarrollamos nuestra aplicación dentro de la carpeta "src" dentro de la carpeta src en el archivo de configuración de "vite" nosotros indicamos cuál es la dirección a partir de la cual se va a encontrar nuestro código. En una de las primeras lecciones, nosotros iniciamos un proyecto de vue que ella venía con esta configuración vue ayudan a partir de una estructura que ya tiene ciertas dependencias, ciertas inicialización definidas, pero es importante que revisemos al menos de manera general, como es que funciona todo el flujo. Lo que estamos viendo aquí es como se está definiendo una configuración de "vite" y aquí tenemos un comentario que nos indica cuál es la documentación de "vite" en caso que queramos conocer más sobre su configuración. Básicamente se están instalando dos plugins de "vite", un plugin para poder usar vue y un plugin para poder usar "jsx", que es la sintaxis que tenemos habilitada dentro de nuestras etiquetas template. Por eso es que aquí se están registrando esos plugins para que puedan funcionar con "vite". Y luego aquí nosotros estamos indicando de dónde se debe tomar nuestro código fuente. En este caso "vite" irá a la carpeta "src" y a partir de esta va a preparar nuestros archivos para producción. Entonces,¿ qué es lo que ocurre cuando se dirige a la carpeta src? Cuando se dirige a la carpeta src se encuentra con un archivo principal llamado "main". Este archivo "main.ts" es el archivo de entrada. Aquí nosotros definimos nuestro proyecto, en este caso se está importando la función “createApp” de vue. Nosotros estamos registrando Vuetify para que se use en conjunto con vue y finalmente estamos montando nuestro componente principal, que en este caso es "ProductList". Sobre el elemento app, el elemento app se encuentra en el "index.html". Si este "index.html" contiene el título de nuestra aplicación, que es lo que se muestra justamente aquí en esta página. Lo que se ve aquí es el título de la aplicación, nosotros lo podemos modificar. Por ejemplo, en este caso lo vamos a llamar "vue 3 ecommerce". Tras guardar los cambios se ven reflejados inmediatamente en el navegador y todo en nuestra aplicación de vue va a vivir dentro de este “div”. Todo va a ocurrir dentro de este “div”. En este caso, esta línea indica que estamos cargando el script "main.ts". Este script es el principal de todos, ya que este se va a encargar de inicializar vue, Vuetify, crear nuestra aplicación de vue, crear una instancia de Vuetify, usar Vuetify y montar nuestro componente principal sobre nuestro HTML. Sin embargo, nosotros muchas veces queremos tener múltiples rutas, no solamente una. Por ejemplo, aquí tenemos productos y tenemos también el carrito de compras en la misma página. De momento está bien porque solo hay tres productos, pero una tienda realmente puede tener más de 100 productos. Por lo tanto, no es conveniente mostrar el carrito de compras debajo de los productos porque muy probablemente se pierda. ¿Qué vamos a hacer entonces? Es añadir una ruta a "cart" para que desde esa ruta se pueda ver el carrito de compras. Para ello tenemos que hacer uso de vue router

¡Suscríbete y continúa aprendiendo!

Repaso e Introducción