Cuando creas un proyecto con Vue CLI te encuentras con decenas de archivos y carpetas que parecen intimidantes al inicio. Entender la estructura de un proyecto Vue.js te permite saber dónde colocar tu código, qué archivos puedes modificar y cuáles maneja Webpack por debajo. Esta guía está pensada para desarrolladores que ya crearon su primer proyecto y quieren dominar su anatomía antes de programar.

¿Qué archivos de configuración trae un proyecto Vue por defecto?

En la raíz del proyecto vive toda la configuración que prepara el terreno antes de escribir una sola línea de tu aplicación.

El package.json define tres comandos clave: el servidor de desarrollo, el build de producción y el linter. Como cualquier proyecto Node.js que usa npm, puedes seguir agregando dependencias sin restricciones. Junto a él aparece el package-lock.json, que fija las versiones exactas instaladas.

El README.md documenta los comandos de instalación, ejecución y compilación, además de un enlace a la documentación oficial. El .gitignore ya viene configurado con los archivos que no debes subir al repositorio, porque Vue CLI inicializa Git automáticamente al crear el proyecto.

¿Qué hace el archivo babel.config.js en Vue? Carga un preset oficial que el equipo de Vue ya configuró por ti. Por eso el archivo es tan corto: solo apunta al preset y Babel hace el resto para que escribas ECMAScript moderno.

¿Cómo funciona la configuración de ESLint y Prettier?

El archivo del linter trae varios plugins activos desde el primer día.

• Plugin Vue 3 Essential con las reglas mínimas para trabajar con Vue 3.
• Configuración recomendada de ESLint y plugin de Vue para Prettier.
• Parser de Babel integrado con ESLint para entender sintaxis moderna.
• Reglas que bloquean console.log y código de debug solo en modo producción.

En desarrollo el linter es permisivo, pero al compilar para producción te marca alerta si dejaste residuos de debug. El entorno se define como Node.js, que es donde corre toda la maquinaria del proyecto.

¿Para qué sirve el archivo browserslistrc?

Este archivo le indica a las herramientas de build qué navegadores debe soportar tu código. Por defecto apunta a las dos versiones más recientes de cada navegador, lo que define cómo Babel transpila y cómo se generan los polyfills.

¿Cuál es la diferencia entre la carpeta public y la carpeta src?

Aquí está una de las distinciones más importantes para no perderte cuando organices archivos.

La carpeta public funciona como un servidor de archivos estáticos gracias a webpack-dev-server. Contiene el favicon.ico y el index.html, este último es un template con el id="app" y variables que Webpack rellena durante el build. No es el HTML final: Webpack lo procesa e inyecta los assets compilados.

¿Puedo modificar el index.html en un proyecto Vue? Sí, pero debes respetar la sintaxis de variables que usa Webpack. Si rompes esa estructura, el build falla porque no encuentra dónde inyectar los scripts y estilos.

La carpeta src es donde realmente vives durante el desarrollo. Ahí van todos los archivos que escribes y mantienes.

¿Qué papel cumple el archivo main.js?

El main.js es el único archivo dentro de src con nombre obligatorio. Webpack lo busca como punto de entrada para inicializar todo el JavaScript del proyecto.

Dentro de main.js ocurren tres cosas concretas: se importa Vue.js, se obtiene la función createApp y se monta la aplicación sobre el id="app" del HTML. También importa el componente raíz App.vue, que actúa como la página principal y contiene a todos los demás componentes que crees.

¿Cómo está estructurado el componente App.vue?

El App.vue usa la sintaxis de single file component con tres secciones bien definidas.

• <template>: la vista del componente en HTML.
• <script>: las opciones del componente y la lógica en JavaScript.
• <style>: los estilos, que pueden usar CSS vanilla o preprocesadores como Sass o Less si los configuraste al crear el proyecto.

Por defecto trae un Hola mundo y una tipografía básica en CSS plano. Cualquier componente que quieras mostrar en pantalla tiene que estar importado y usado dentro de este archivo o sus hijos.

¿Cuándo usar la carpeta assets y cuándo la carpeta components?

Estas dos carpetas dentro de src van a aparecer en todos tus proyectos Vue.

La carpeta components guarda todos los componentes .vue de tu aplicación. La puedes organizar con subcarpetas según el tamaño del proyecto, por ejemplo separando componentes de UI, layouts y vistas.

La carpeta assets guarda archivos estáticos como imágenes, fuentes o íconos. Aquí está la diferencia clave con public: lo que pongas en assets se empaqueta junto al código dentro de la carpeta dist cuando compilas para producción. Webpack los procesa, optimiza y los junta con tu JavaScript, HTML y CSS.

Piénsalo así: public queda del lado del servidor como archivos sueltos, mientras que assets queda del lado del cliente y se descarga junto con la aplicación desde que cargas la página.

El ejemplo HelloWorld.vue que viene incluido te muestra esta sintaxis funcionando con enlaces a la documentación oficial y código ECMAScript moderno gracias a Babel.

Esta estructura mínima alcanza para proyectos completos y profesionales. Puedes crear todas las subcarpetas que necesites alrededor de assets y components para mantener el orden conforme tu aplicación crece. ¿Cómo organizas tú las carpetas en tus proyectos Vue? Déjamelo en los comentarios.