Vue: introduccion y entorno

Vue 3 es un framework progresivo para interfaces web. Empiezas con un componente y escalas a SPA con router, estado global y tooling moderno. El estandar actual es Composition API con <script setup>: menos boilerplate, mejor TypeScript y logica reutilizable.

Capitulos

1. Introduccion y entorno
2. Componentes y templates
3. Reactividad
4. Props, eventos y composables
5. Vue Router
6. Pinia y estado global
7. Formularios
8. APIs
9. Testing
10. Despliegue

Que problema resuelve

Sin un framework:

• Manipulas el DOM a mano y el estado se dispersa.
• Reutilizas poco; cada pantalla reinventa la rueda.
• El build y el hot-reload no estan estandarizados.

Con Vue 3 + Vite:

SFC (.vue) -> Vite (dev/build) -> app reactiva en el navegador

Requisitos

• Node.js 18+ (LTS recomendado)
• npm, pnpm o yarn

node -v
npm -v

Crear proyecto con create-vue

npm create vue@latest mi-app-vue
cd mi-app-vue
npm install
npm run dev

El asistente pregunta por TypeScript, Router, Pinia, Vitest y ESLint. Para este manual conviene marcar Router, Pinia y Vitest.

Estructura tipica:

mi-app-vue/
  index.html
  package.json
  vite.config.ts
  src/
    main.ts
    App.vue
    components/
    views/
    router/
    stores/

Single File Component (SFC)

Un .vue une plantilla, logica y estilos:

<script setup lang="ts">
import { ref } from 'vue'

const mensaje = ref('Hola Vue 3')
const contar = () => {
  mensaje.value = `Clicks: ${Number(mensaje.value.replace(/\D/g, '') || 0) + 1}`
}
</script>

<template>
  <main>
    <h1>{{ mensaje }}</h1>
    <button type="button" @click="contar">Sumar</button>
  </main>
</template>

<style scoped>
h1 {
  font-size: 1.5rem;
}
</style>

<script setup> declara variables y funciones disponibles en el template sin return.

Arranque de la app

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

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

Vite sirve index.html, resuelve imports y recarga al guardar.

Composition API vs Options API

Enfoque	Uso
Options API	data, methods, mounted — legible en apps pequenas
Composition API	ref, reactive, onMounted — default moderno
script setup	Azucar sobre Composition API; menos ruido

Este manual usa Composition API + script setup en todos los ejemplos.

Buenas practicas iniciales

• Un componente por archivo; nombres en PascalCase (UserCard.vue).
• Prefiere ref/computed a estado mutable disperso.
• Activa TypeScript si el equipo ya lo usa en el backend.
• No mezcles Options y Composition en el mismo componente.
• Versiona package-lock.json / pnpm-lock.yaml.

Errores habituales

• Olvidar .value al leer/escribir un ref en el script.
• Crear el proyecto con Vue 2 o CDN sin build cuando necesitas router/Pinia.
• Ignorar la version de Node y fallar en npm create vue.
• Meter logica de negocio en App.vue en lugar de componentes/views.
• Confundir npm run dev (desarrollo) con npm run build (produccion).

Ejercicios

1. Crea un proyecto con create-vue e inicia el servidor de desarrollo.
2. Sustituye el contenido de App.vue por un contador con ref y un boton.
3. Anade un segundo componente HelloName.vue que muestre un nombre fijo e importalo en App.vue.
4. Ejecuta npm run build y comprueba que genera dist/.

Siguiente paso

En el capitulo 2 veras plantillas, directivas, listas, condicionales y como componer la UI con componentes hijos.