Curso Vue 3 — 10 ejemplos

Curso práctico en español con proyectos independientes (cada carpeta tiene su propio package.json). Orden recomendado: del 01 al 10.

Requisitos previos

• HTML y CSS básicos (etiquetas, clases, selectores).
• JavaScript básico: variables, funciones, objetos, arrays, if/for.
• Node.js en versión LTS (nodejs.org).
• npm (viene con Node).

Glosario rápido

Término	Significado
Terminal / consola	Ventana donde escribes comandos (cd, npm, etc.).
cd carpeta	Entrar en una carpeta del proyecto.
npm install	Descarga las dependencias listadas en package.json.
npm run dev	Arranca el servidor de desarrollo de Vite (recarga al guardar).
Módulo ES (import / export)	Forma estándar de organizar código en archivos .js / .vue.

Cómo ejecutar un ejemplo

Desde la raíz de este repositorio (VUE/):

cd ejemplos/01-hola-mundo
npm install
npm run dev

Abre la URL que muestra la terminal (normalmente http://localhost:5173). Repite el mismo flujo en cada carpeta de ejemplos/.

Índice de lecciones

#	Carpeta	Tema
1	ejemplos/01-hola-mundo	Hola mundo, proyecto Vite, interpolación {{ }}
2	ejemplos/02-reactividad	ref, valores reactivos
3	ejemplos/03-eventos-y-formularios	Eventos @click, v-model
4	ejemplos/04-listas-y-condicionales	v-if, v-for, :key
5	ejemplos/05-componentes	Props y eventos (defineProps, defineEmits)
6	ejemplos/06-estilos-dinamicos	scoped, :class, :style
7	ejemplos/07-computed-watch-ciclo-vida	computed, watch, onMounted
8	ejemplos/08-vue-router	Rutas con Vue Router
9	ejemplos/09-fetch-y-estado	fetch, estados loading/error, composable
10	ejemplos/10-mini-proyecto	Mini SPA: router + componentes + lista

Cada carpeta incluye su propio README con objetivos y retos opcionales.

Siguientes pasos (fuera de este curso)

• Pinia para estado global más grande.
• TypeScript con Vue.
• Documentación oficial: vuejs.org.