Por: Ernesto Canquiz

Cuando la Aplicación Crece

A medida que un proyecto avanza, es común que surja la necesidad de crear carpetas adicionales para organizar mejor los archivos y componentes. Una estructura más compleja puede verse así:

└──src/
   ├──assets/
   ├──components/
   ├──composables/
   ├──layouts/
   ├──middleware/
   ├──router/
   ├──services/
   ├──store/
   ├──types/
   ├──utils/
   └──views/

TIP

Es importante tener en cuenta que, por convención, la carpeta layouts/ puede denominarse themes/, la carpeta services/ puede ser llamada apis/, y utils/ puede ser conocida como libs/. Estas variaciones en la nomenclatura son cuestiones de preferencia y no afectan la funcionalidad. La elección del nombre debe ser consensuada por el equipo de desarrollo.

Tenga en cuenta que mientras que las vistas aumentan es probable que también aumentarán los componentes y componibles.

└──src/
   ├──assets/
   ├──components/
   │  ├──FooCard.vue
   │  ├──FooForm.vue
   │  ├──BarCard.vue
   │  ├──BarForm.vue
   │  ├──BasCard.vue
   │  └──BasForm.vue
   ├──composables/
   │  ├── useFooOne.ts
   │  ├── useFooOther.ts
   │  ├── useBarOne.ts
   │  ├── useBarOther.ts
   │  ├── useBasOne.ts
   │  └── useBasOther.ts
   ├──layouts/
   ├──middleware/
   ├──router/
   ├──services/
   ├──store/
   ├──types/
   ├──utils/
   └──views/
      ├── Foo.vue
      ├── Bar.vue
      └── Bas.vue

División de Carpetas

Aunque podría parecer útil al principio, resulta incómodo a la larga.

└──src/
   ├──assets/
   ├──components/
   │  ├──Foo/
   │  │  ├── Card.vue
   │  │  └── Form.vue
   │  ├──Bar/
   │  │  ├── Card.vue
   │  │  └── Form.vue
   │  └──Bas/
   │     ├── Card.vue
   │     └── Form.vue
   ├──composables/
   │  ├──Foo/
   │  │  ├── useOne.ts
   │  │  └── useOther.ts
   │  ├──Bar/
   │  │  ├── useOne.ts
   │  │  └── useOther.ts
   │  └──Bas/
   │     ├── useOne.ts
   │     └── useOther.ts
   ├──layouts/
   ├──middleware/
   ├──router/
   ├──services/   
   ├──store/
   ├──types/
   ├──utils/
   └──views/
      ├──Foo.vue
      ├──Bar.vue
      └──Bas.vue

TIP

Tenga en cuenta que una de las ventajas de dividir carpetas es que elimina la necesidad de agregar prefijos o sufijos a los componentes secundarios para asociarlos con los componentes principales.