🛠️ Setup del Entorno

Objetivo: Configurar tu máquina para desarrollar con nuestro stack Vue.js 3 + TypeScript + Monorepo

⚡ Setup Rápido (Windows)

# 1. Instalar Node.js 22+ LTS desde https://nodejs.org/
# 2. Instalar pnpm globalmente
npm install -g pnpm

# 3. Instalar nvm-windows (opcional, recomendado)
#    https://github.com/coreybutler/nvm-windows/releases
nvm install 22
nvm use 22

# 4. Clonar el proyecto base
git clone https://github.com/Kompa-s/proyecto-vue.git
cd proyecto-vue

# 5. Instalar dependencias
pnpm install

# 6. Build packages base
pnpm -r build

🎯 Entendiendo el Proyecto Base

El repositorio proyecto-vue tiene DOS funciones principales:

1. 🧪 Proyecto de Pruebas y Familiarización

📁 proyecto-vue/
├── 📁 @apps/                    # Microfrontends de ejemplo/prueba
├── 📁 packages/                 # Librerías compartidas de ejemplo
│   ├── 📁 types/               # Tipos de ejemplo
│   ├── 📁 utils/               # Utilidades de ejemplo
│   └── 📁 vue-utils/           # Utilidades Vue de ejemplo
└── 📄 pnpm-workspace.yaml      # Configuración de referencia

Propósito:

✅ Aprender la arquitectura de microfrontends
✅ Experimentar con el stack Vue 3 + TypeScript
✅ Familiarizarse con patrones antes de proyectos reales
✅ Pruebas locales sin commits al repositorio

2. 🎨 Generador de Código (con dos vertientes)

📁 proyecto-vue/
├── 📁 plop-templates/           # Templates para generar código
│   ├── 📁 proyecto-completo/   # 🆕 Workspace completo desde cero
│   ├── 📁 microfrontend-integrado/  # Microfrontend específico
│   ├── 📁 libreria-vue/        # Librería Vue específica
│   └── 📁 libreria-utils/      # Librería utilidades específica
└── 📄 plopfile.js              # Configuración del generador

Propósito:

✅ Generar workspaces completos para nuevos equipos
✅ Generar código específico para equipos existentes
✅ Un solo clone - no necesitas múltiples repositorios

🚀 Tres Flujos de Trabajo

Flujo A: Aprendizaje y Experimentación 🧪

cd proyecto-vue

# Jugar con microfrontends existentes
pnpm app-{ejemplo} dev

# Crear microfrontend de prueba (solo local)
npx plop → microfrontend-integrado
pnpm app-mi-prueba dev

# NO hacer commits - solo para aprender

Flujo B: Generar Workspace Completo 🏗️

cd proyecto-vue
npx plop → proyecto-completo
# Copiar a tu nuevo repositorio
Copy-Item -Recurse ./mi-nuevo-workspace/* /ruta/a/mi/nuevo/repo/
cd /ruta/a/mi/nuevo/repo
pnpm install && pnpm build

Flujo C: Generar Código Específico 📦

cd proyecto-vue

# Generar microfrontend específico
npx plop → microfrontend-integrado
# Genera: @apps/mi-componente/

# Copiar a tu repo real
Copy-Item -Recurse @apps/mi-componente ../mi-repo-real/@apps/

# O generar librería específica
npx plop → libreria-vue
# Genera: packages/mi-utileria/

# Copiar a tu repo real
Copy-Item -Recurse packages/mi-utileria ../mi-repo-real/packages/

🔑 Herramientas Requeridas

Herramienta	Versión	Propósito
Node.js	22+ LTS	Runtime de desarrollo
pnpm	10+	Package manager con soporte workspaces
VS Code	Latest	IDE recomendado
Git	Latest	Control de versiones

🤔 ¿Cuál Flujo Necesito?

Usa Flujo A si:

✅ Eres nuevo en microfrontends con Vue 3
✅ Quieres aprender la arquitectura antes de proyectos reales
✅ Necesitas experimentar con patrones y configuraciones
✅ Quieres practicar sin riesgo de romper nada

Usa Flujo B si:

✅ Tu equipo empieza un proyecto completamente nuevo desde cero
✅ Necesitas workspace completo con toda la estructura
✅ Quieres configuraciones probadas pero independientes

Usa Flujo C si:

✅ Ya tienes un workspace funcionando en tu equipo
✅ Solo necesitas generar un componente específico
✅ Quieres evitar clonar múltiples repos
✅ Necesitas microfrontend o librería para copiar a tu proyecto

✅ Checklist de Setup

Para Flujo A (Aprendizaje):

Node.js 22+ y pnpm instalados
git clone del proyecto-vue
pnpm install y pnpm -r build exitosos
Puedes ejecutar pnpm app-{ejemplo} dev
NO hagas commits - solo experimenta localmente

Para Flujo B (Workspace Nuevo):

Node.js 22+ y pnpm instalados
git clone del proyecto-vue
Generaste workspace con npx plop → proyecto-completo
Copiaste workspace completo a tu nuevo repositorio
pnpm install y pnpm build funcionan en tu repo

Para Flujo C (Código Específico):

Node.js 22+ y pnpm instalados
git clone del proyecto-vue
Generaste componente con npx plop → microfrontend-integrado o libreria-vue
Copiaste solo el componente a tu repo real
El componente funciona en tu workspace existente

🚀 Próximos Pasos

Si usaste Flujo A:

🚀 Quick Start - Crear tu primer microfrontend

Si usaste Flujo B:

📋 Templates y Scaffolding - Entender cómo generar código en tu workspace
🧠 Conceptos Clave - Arquitectura de microfrontends