Vue Academy · Lección

Estructura del proyecto generado

Explore los archivos y carpetas que genera un proyecto Vue

Estructura del proyecto generado es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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.

Recorrido por el proyecto

Un proyecto de Vue cuya estructura se ha generado tiene una organización de carpetas predecible.

src/ contiene el código fuente de la aplicación
public/ contiene recursos estáticos que se sirven sin modificaciones
package.json contiene las dependencias y los scripts
index.html es la página en la que Vue se monta

Saber dónde se encuentra cada elemento le ayuda a desplazarse rápidamente por el proyecto.

La carpeta src

La carpeta src/ contiene todo lo que escribe.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

Punto de entrada main.js

main.js es donde se inicia la aplicación. Crea la aplicación y la monta.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

Componente raíz App.vue

App.vue es el componente raíz. Todos los demás componentes se encuentran dentro de él.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

La carpeta components

La carpeta components/ contiene componentes reutilizables de un solo archivo.

Cada archivo .vue es un componente
Impórtelos donde los necesite
Organícelos en subcarpetas a medida que la aplicación crezca

La carpeta public

La carpeta public/ contiene archivos estáticos que se copian sin modificaciones en el resultado de compilación.

El empaquetador no procesa los archivos de esta carpeta
Úsela para favicons, robots.txt o recursos fijos
Haga referencia a ellos mediante rutas absolutas desde la raíz

Punto de montaje de index.html

index.html es la única página HTML. Contiene el destino de montaje.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.json describe el proyecto y sus dependencias.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Scripts de package.json

La sección scripts define los comandos que ejecuta con npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets frente a public

Hay dos formas de almacenar archivos estáticos:

src/assets/ el empaquetador los procesa, les añade un hash para la caché y se importan en el código
public/ se copian sin modificaciones y se hace referencia a ellos mediante una ruta fija

Use assets para los elementos que importa y public para los que deben conservar una URL estable.

Cómo encaja todo

Este es el flujo cuando se carga la aplicación:

El navegador carga index.html
Ejecuta main.js mediante una etiqueta de script de módulo
main.js monta App.vue en #app
App.vue renderiza los componentes secundarios

Comprobación rápida

Compruebe cuánto sabe sobre la estructura de un proyecto.

Resumen: estructura del proyecto

Ha explorado la organización de un proyecto de Vue:

src/ contiene el código
main.js inicia la aplicación
App.vue es el componente raíz
components/ contiene las partes reutilizables
public/ e index.html sirven el contenido estático
package.json define las dependencias y los scripts

A continuación: configurará la CLI y añadirá plugins.

Preguntas frecuentes

¿La lección «Estructura del proyecto generado» es gratis?

Sí — el texto completo de «Estructura del proyecto generado» 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 del proyecto generado»?

Explore los archivos y carpetas que genera un proyecto Vue 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 2 de 3.

¿Cuánto tiempo toma la lección «Estructura del proyecto generado»?

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

← Volver a Vue Academy