Organizar components

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.

Crea una cuenta y continúa aprendiendo 🚀

Organizar components