Estructura de carpetas escalable
Organice proyectos grandes de Vue para facilitar su mantenimiento.
Estructura de carpetas escalable es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
La estructura importa
A medida que una aplicación Vue supera unas pocas decenas de archivos, la forma de organizarla determina lo fácil que resulta explorarla, mantenerla e incorporar a nuevos desarrolladores. Una buena estructura escala; una caótica ralentiza a todo el equipo.
Organización por tipo
El enfoque basado en tipos agrupa los archivos según lo que son: todos los componentes juntos, todas las vistas juntas y todos los stores juntos. Es sencillo y funciona bien en aplicaciones pequeñas y medianas.
src/
components/
views/
stores/
composables/
router/Organización por funcionalidad
El enfoque basado en funcionalidades agrupa los archivos según la funcionalidad a la que pertenecen. Todo lo relacionado con la funcionalidad de autenticación vive en una sola carpeta, lo que facilita comprender las aplicaciones grandes.
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.jsElegir un enfoque
La organización por tipo es ideal para aplicaciones pequeñas. A medida que una aplicación crece y se multiplican las funcionalidades, la organización por funcionalidades mantiene unido el código relacionado y reduce los saltos entre carpetas. Muchos equipos comienzan organizando por tipo y migran a medida que escalan.
Separar vistas y componentes
Diferencie las vistas (componentes de nivel de página asociados a rutas) de los componentes (bloques de construcción reutilizables). Esta separación aclara qué piezas pueden asociarse a rutas y cuáles se comparten.
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vueOrganizar composables
Mantenga la lógica reutilizable de Composition API en una carpeta composables. Nombrarlos con el prefijo use indica su propósito de un vistazo.
composables/
useAuth.js
useFetch.js
useLocalStorage.jsOrganizar stores
Coloque los stores de estado global en una carpeta stores, con un archivo por dominio. Así, la gestión del estado resulta fácil de localizar y modular.
stores/
user.js
cart.js
settings.jsConvenciones de nomenclatura
La coherencia reduce las dificultades. Use PascalCase para los archivos de componentes, añada el prefijo Base a los componentes base y use nombres compuestos para evitar conflictos con los elementos HTML.
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.jsExportaciones barrel
Un barrel es un archivo index.js que vuelve a exportar el contenido de una carpeta, de modo que los consumidores importan desde una sola ruta en lugar de hacerlo desde muchas.
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"Importar desde un barrel
Con un barrel, varias importaciones se reducen a una sola línea ordenada, lo que mejora la legibilidad.
import { useAuth, useFetch } from "@/composables"Mantener la coherencia
Sea cual sea la estructura que elija, aplíquela de manera coherente y documéntela en el README del proyecto. La mejor estructura es la que todo el equipo entiende y sigue. Oriente la refactorización hacia las funcionalidades a medida que crezca la aplicación.
Comprobación rápida
Compruebe sus conocimientos sobre la estructura de carpetas.
Recapitulación
Organice por tipo las aplicaciones pequeñas y por funcionalidad a medida que escalen. Separe las vistas asociadas a rutas de los componentes reutilizables, mantenga los composables y los stores en sus propias carpetas, siga una nomenclatura coherente y use barrel exports para obtener importaciones limpias. La coherencia, documentada para el equipo, es lo que realmente hace escalable una estructura.
Preguntas frecuentes
¿La lección «Estructura de carpetas escalable» es gratis?
Sí — el texto completo de «Estructura de carpetas escalable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Estructura de carpetas escalable»?
Organice proyectos grandes de Vue para facilitar su mantenimiento. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Estructura de carpetas escalable»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Mixins y directivas personalizadas
- Desarrollo de plugins
- Estructura de carpetas escalable