randymxd07 / Vue_Structure_Proposal

This is a directory structure that I made for large projects taking into account atomic design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue Structure Proposal

This template should help get you started developing with Vue 3 in Vite.

src/                                        // Directorio principal del código fuente del proyecto
|-- assets/                                 // Archivos estáticos como CSS, imágenes y fuentes
|   |-- css/                                // Archivos CSS
|   |-- images/                             // Imágenes utilizadas en el proyecto
|   |-- fonts/                              // Fuentes utilizadas en el proyecto
|-- components/                             // Componentes de Vue.js organizados por niveles de abstracción
|   |-- atoms/                              // Componentes atómicos básicos
|   |   |-- Button.vue
|   |   |-- Input.vue
|   |   |-- ...
|   |-- molecules/                          // Componentes que combinan varios componentes atómicos
|   |   |-- TaskItem.vue
|   |   |-- TaskList.vue
|   |   |-- ...
|   |-- organisms/                          // Componentes que encapsulan unidades más grandes de la interfaz
|   |   |-- TaskManager.vue
|   |   |-- UserProfile.vue
|   |   |-- ...
|   |-- widgets/                            // Componentes que encapsulan unidades más grandes de la interfaz
|   |   |-- ...
|   |-- templates/                          // Plantillas que definen la estructura básica de una página
|   |   |-- DefaultLayout.vue
|   |   |-- ...
|-- shared/                                 // Código compartido utilizado en todo el proyecto
|   |-- api/                                // Archivos relacionados con la comunicación con servicios externos
|   |   |-- taskService.js
|   |   |-- ...
|   |-- helpers/                            // Funciones y utilidades de ayuda
|   |   |-- dateUtils.js
|   |   |-- ...
|   |-- interfaces/                         // Interfaces o contratos para diversas partes del sistema
|   |   |-- task.interface.js
|   |   |-- ...
|   |-- plugins/                            // Configuración de plugins utilizados en el proyecto
|   |   |-- axios.js
|   |   |-- ...
|   |-- composables/                        // Composables de Vue, funciones reactivas reutilizables
|   |   |-- useTask.js
|   |   |-- useAuth.js
|   |   |-- ...
|   |-- data/                               // Datos de prueba o mocks utilizados durante el desarrollo
|   |   |-- taskMocks.js
|   |   |-- ...
|   |-- use_cases/                          // Implementaciones de casos de uso de la aplicación
|   |   |-- AddTaskUseCase.js
|   |   |-- DeleteTaskUseCase.js
|   |   |-- ...
|-- router/                                 // Configuración del enrutador de Vue Router
|   |-- index.js
|-- stores/                                 // Configuración de Pinia, el sistema de gestión de estado de Vue
|   |-- index.js
|   |-- modules/                            // Módulos Pinia organizados por funcionalidad
|   |   |-- task.js
|   |   |-- user.js
|   |   |-- ...
|-- modules/                                // Módulos de la aplicación organizados por funcionalidades
|   |-- TaskManager/                        // Módulo principal del gestor de tareas
|   |   |-- assets/
|   |   |   |-- images/
|   |   |   |-- styles/
|   |   |   |-- ...
|   |   |-- components/
|   |   |   |-- FeaturedTask.vue
|   |   |   |-- TaskList.vue
|   |   |   |-- ...
|   |   |-- stores/
|   |   |   |-- index.js
|   |   |   |-- modules/
|   |   |   |   |-- tasks.js
|   |   |   |   |-- ...
|   |   |-- interfaces/
|   |   |   |-- taskManager.interface.js
|   |   |   |-- ...
|   |   |-- router/
|   |   |   |-- index.js
|   |   |   |-- ...
|   |   |-- TaskManager.vue
|   |-- Reminders/                          // Módulo de recordatorios
|   |   |-- assets/
|   |   |   |-- ...
|   |   |-- components/
|   |   |   |-- ReminderList.vue
|   |   |   |-- ReminderForm.vue
|   |   |   |-- ...
|   |   |-- stores/
|   |   |   |-- index.js
|   |   |   |-- modules/
|   |   |   |   |-- reminders.js
|   |   |   |   |-- ...
|   |   |-- interfaces/
|   |   |   |-- reminder.interface.js
|   |   |   |-- ...
|   |   |-- router/
|   |   |   |-- index.js
|   |   |   |-- ...
|   |   |-- Reminders.vue
|-- tests/                                  // Pruebas automatizadas del proyecto
|   |-- unit/                               // Pruebas unitarias organizadas por componentes y funcionalidades
|   |   |-- components/
|   |   |   |-- atoms/
|   |   |   |   |-- Button.spec.js
|   |   |   |   |-- Input.spec.js
|   |   |   |   |-- ...
|   |   |   |-- molecules/
|   |   |   |   |-- TaskItem.spec.js
|   |   |   |   |-- TaskList.spec.js
|   |   |   |   |-- ...
|   |   |   |-- organisms/
|   |   |   |   |-- TaskManager.spec.js
|   |   |   |   |-- UserProfile.spec.js
|   |   |   |   |-- ...
|   |   |   |-- templates/
|   |   |   |   |-- DefaultLayout.spec.js
|   |   |   |   |-- ...
|   |   |-- shared/
|   |   |   |-- api/
|   |   |   |   |-- taskService.spec.js
|   |   |   |-- helpers/
|   |   |   |   |-- dateUtils.spec.js
|   |   |   |   |-- ...
|   |   |   |-- use_cases/
|   |   |   |   |-- AddTaskUseCase.spec.js
|   |   |   |   |-- DeleteTaskUseCase.spec.js
|   |   |   |   |-- ...
|   |   |   |-- ...
|-- App.vue
|-- main.js

About

This is a directory structure that I made for large projects taking into account atomic design


Languages

Language:TypeScript 50.6%Language:Vue 39.0%Language:HTML 10.4%