Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
En esta lección organizamos mejor los componentes de nuestro proyecto. Así mismo eliminamos componentes que ya no necesitamos y que vinieron creados inicialmente.
Han desaparecido porque ya no estamos cargando ProductList
, estamos cargando tres componentes nuevos.
Pero no te preocupes, nuestros componentes siguen existiendo. Solo necesitamos organizar un poco nuestro proyecto.
Así como tenemos una carpeta views
donde cada componente representa una página, también tenemos una carpeta components
, donde se recomienda ubicar los componentes de nuestra aplicación.
Cuando creamos nuestro proyecto inicial, este incluía tres componentes: HelloWorld
, TheWelcome
y WelcomeItem
.
Como ya no necesitamos estos componentes, los vamos a eliminar.
Vamos a ubicar los componentes que habíamos creado en la carpeta components
, ya que los teníamos en la carpeta examples
. Para ello:
examples
dentro del navegador de archivos de Windows.ProductList
, ProductCard
y Cart
.components
.En examples
vamos a dejar simplemente los dos contadores de ejemplo que hicimos al inicio para revisar la diferencia entre Option API y Composition API.
También vamos a llevarnos nuestros tipos a otra carpeta:
model
.Se estila crear una carpeta model
para contener las interfaces, ya que representa la capa de modelo de nuestro proyecto.
HomeView
Vamos a modificar HomeView
para incluir en su interior el componente ProductList
.
ProductList
.HomeView
incluye a ProductList
.cart
, tiene su propio contenido.about
también tiene su propio contenido.home
estamos viendo los productos.Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Respecto a nuestros avances anteriores han desaparecido porque ya no estamos cargando "ProductList", estamos cargando tres componentes nuevos. Pero no te preocupes porque nuestros componentes siguen existiendo. Solo necesitamos organizar un poco nuestro proyecto. Así como tenemos una carpeta "views" donde cada componente representa una página. Tenemos también una carpeta "components" donde se recomienda ubicar a los componentes de nuestra aplicación. Cuando creamos nuestro proyecto inicial, este incluía tres componentes, "HelloWorld", "TheWelcome" y "WelcomeItem". Como ya no necesitamos estos componentes, los vamos a eliminar y lo que vamos a hacer es ubicar nuestros componentes, los que habíamos creado en la carpeta de “components”, ya que los teníamos en la carpeta de "examples". Si voy a dirigirme a la carpeta de "examples" dentro del navegador de archivos de Windows y voy a cortar "ProductList", "ProductCard" y "Cart" a la carpeta correspondiente de "components". En "examples" vamos a dejar simplemente a nuestros dos contadores de ejemplo que hicimos al inicio para revisar la diferencia entre Option API y Composition API. Vamos a llevarnos nuestros tipos también a otra carpeta. Vamos a crear una carpeta "model" y dentro de esa carpeta vamos a poner nuestros tipos. Se estila crear una carpeta model para contener las interfaces, ya que representa la capa de modelo de nuestro proyecto. Tras hacer ello, vamos a modificar nuestro "HomeView". Vamos a hacer que nuestro cambio incluya en su interior a nuestro componente "ProductList". De esta manera, si hacemos eso, vemos que la ruta de inicio muestra a nuestro componente "ProductList". Esto es debido a que "HomeView" incluye a producto. Si nos vamos a la ruta de "cart", sin embargo, tiene su propio contenido y la ruta de "about" también. Solo en "home" estamos viendo los productos.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
52
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.