Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Organizar components

En esta lección organizamos mejor los componentes de nuestro proyecto. Así mismo eliminamos componentes que ya no necesitamos y que vinieron creados inicialmente.

Respecto a nuestros avances

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.

Organización del 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.

Eliminación de componentes innecesarios

Cuando creamos nuestro proyecto inicial, este incluía tres componentes: HelloWorld, TheWelcome y WelcomeItem.

Como ya no necesitamos estos componentes, los vamos a eliminar.

Ubicación de los componentes creados

Vamos a ubicar los componentes que habíamos creado en la carpeta components, ya que los teníamos en la carpeta examples. Para ello:

Dirigirse a la carpeta examples dentro del navegador de archivos de Windows.
Cortar ProductList, ProductCard y Cart.
Pegarlos en la carpeta 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.

Organización de los tipos

También vamos a llevarnos nuestros tipos a otra carpeta:

Crear una carpeta model.
Mover dentro de esa carpeta nuestros tipos.

Se estila crear una carpeta model para contener las interfaces, ya que representa la capa de modelo de nuestro proyecto.

Modificación de `HomeView`

Vamos a modificar HomeView para incluir en su interior el componente ProductList.

Si hacemos esto, la ruta de inicio mostrará ProductList.
Esto ocurre porque HomeView incluye a ProductList.
Si nos vamos a la ruta de cart, tiene su propio contenido.
La ruta de about también tiene su propio contenido.
Solo en 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 pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code