Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Repaso e Introducción
Hacemos un breve repaso sobre la estructura y configuración de nuestro proyecto. Finalmente vemos por qué es importante usar Vue Router para nuestra aplicación.
Repaso del Proyecto
Vite es la herramienta que estamos usando para compilar nuestro código JavaScript. Nosotros desarrollamos nuestra aplicación dentro de la carpeta src.
Dentro del archivo de configuración de vite, 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, iniciamos un proyecto de Vue que ya venía con esta configuración. Vue ayuda a partir de una estructura que tiene ciertas dependencias e inicializaciones definidas, pero es importante revisar de manera general cómo funciona todo el flujo.
Aquí se está definiendo una configuración de vite, y encontramos un comentario que nos indica la documentación de vite en caso de querer conocer más sobre su configuración.
Se están instalando dos plugins de vite:
- Un plugin para poder usar Vue.
- Un plugin para poder usar
jsx, la sintaxis habilitada dentro de nuestras etiquetastemplate.
Estos plugins se registran para que puedan funcionar con vite. Luego, se indica de dónde se debe tomar el código fuente. En este caso, vite irá a la carpeta src y a partir de ahí preparará los archivos para producción.
Archivo main.ts
Cuando vite se dirige a la carpeta src, encuentra un archivo principal llamado main.ts. Este archivo es el punto de entrada del proyecto.
En main.ts:
- Se importa la función
createAppde Vue. - Se registra Vuetify para que se use en conjunto con Vue.
- Se monta el componente principal
ProductListsobre el elementoapp.
index.html
El elemento app se encuentra en index.html. Este archivo contiene el título de la aplicación, que es lo que se muestra en la página.
Por ejemplo, podemos modificar el título a Vue 3 Ecommerce. Tras guardar los cambios, estos se reflejan inmediatamente en el navegador.
Todo en nuestra aplicación de Vue vivirá dentro de este div. En este caso, la línea de código indica que se está cargando el script main.ts, que se encarga de:
- Inicializar Vue.
- Inicializar Vuetify.
- Crear nuestra aplicación de Vue.
- Crear una instancia de Vuetify.
- Usar Vuetify.
- Montar el componente principal sobre el HTML.
Manejo de Rutas
Muchas veces queremos tener múltiples rutas, no solo una.
Por ejemplo, actualmente tenemos productos y también el carrito de compras en la misma página. Esto funciona bien con tres productos, pero en una tienda real podría haber más de 100 productos.
No es conveniente mostrar el carrito de compras debajo de los productos, ya que probablemente se pierda entre la información.
Implementación de Vue Router
Para solucionar esto, añadiremos una ruta a cart, de modo que desde esa ruta se pueda ver el carrito de compras. Para ello, debemos hacer uso de vue-router.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript