Estructura de archivos en proyectos Vue CLI

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:46

Estructura de archivos en proyectos Vue CLI

Curso de Vue.js: Componentes y Composition API

Clase 3 de 23

Clase 3 / 23

Recursos

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.

Lucas Da Rosa

Hace 4 años

package.json → Tiene nuestras dependencias, nuestros scripts que correremos con npm, nos prepara el terreno para poder trabajar.
README.md→ Podemos ver los distintos comandos para poder instalar dependencias, ejecutar el servidor de desarrollo, compilar para producción, eslinter, documentación oficial.
babel.config.js → Configuración de babel. Es pequeño debido a que el equipo de desarrollo detrás de este proyecto ya se encargó de generar un preset de babel js, que ya lo tiene instalado nuestro proyecto.
.gitignore → Ignorar archivos para no subirlos al repositorio.
.eslintrc.js → Archivo para configurar eslint, este archivo agrega dos reglas, cuando se tenga activado el modo productivo se va a pedir que no se tengan console.log() y que no hayan debugger.
.browserslistrc → Le indicamos con que versiones de navegadores debe trabajar.
node_modules → En esta carpeta van a estar todos los módulos y dependencias que tiene nuestro proyecto.
public/ → Esta carpeta contiene un favicon.ico y un index.html, corre en un servidor de archivos estáticos.
src/ → La carpeta más importante, vamos a colocar todos los archivos en los que de verdad vamos a estar trabajando durante el desarrollo del proyecto. El archivo main.js es el archivo que va a encontrar el proyecto de webpack y lo va a utilizar para inicializar todo lo que tiene que ver con JavaScript en nuestro proyecto.
src/App.vue → Componente principal, es en el que se creará la App en main.js.
src/assets → Contendrá archivos estáticos, la diferencia entre src/assets y public/ es que assets se va a empaquetar junto con los archivos del proyecto, es decir, se va adjuntar todo el código javascript, css y html que se genere y también se van a incluir estos archivos estáticos en la carpeta dist (Creada con npm run build), lo que pasa con public es que esto no pasa a la carpeta dist, sin embargo, quedaría más del lado del servido, mientras que assets queda del lado del cliente.
src/components → Esta carpeta contendrá todos los componentes hechos en Vue.js que utilizaremos en nuestro proyecto. Esta carpeta se puede estructurar como sea, se pueden tener subcarpetas, por ejemplo.

Nicolas Velasquez Lopez

Hace 4 años

Muchas gracias por tu aporte Lucas! Tomé tu resumen para mis apuntes

Josue Cerron Tuesta

Hace 4 años

Gracias por el aporte!

Comentarios (10)10 comentarios

Luis Fernando Rodriguez Boett

José Reinaldo Duque Serna

Hace 5 años

Enzo Norese Rivera

Ameth Ordoñez Erazo

Anderson Eduardo Arévalo Ramírez

Jose Alejandro Pantoja Giraldo

José Alberto Ramírez Quiroz

Julian David Alzate Cuervo

Cristian Rodriguez Morales

Bulmaro Arellano Navarrete

Diana Martinez

Seba Cardoso

Hace 3 meses

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

Estructura de archivos en proyectos Vue CLI

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos