Vue.js

Descripción general

Vue.js es un framework progresivo de JavaScript para crear interfaces de usuario. Está diseñado para adoptarse de forma incremental y se centra en la capa de vista, lo que facilita su integración con otras librerías o proyectos existentes.

Inicio rápido

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Desarrollo local con Docker

Si no tienes Node.js instalado localmente, puedes usar Docker para ejecutar comandos de Vue. El proyecto incluye un Dockerfile para builds de producción con nginx.

Requisitos previos

Instala Docker Desktop para tu sistema operativo (Windows, Mac o Linux).

Ejecutar comandos con Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Estructura del proyecto

Entender dónde se ubican los archivos:

├── src/
│   ├── assets/               # Recursos estáticos (imágenes, fuentes)
│   ├── components/           # Componentes Vue
│   ├── views/                # Componentes de página
│   ├── router/               # Configuración de Vue Router
│   ├── stores/               # Stores de Pinia
│   ├── App.vue               # Componente raíz
│   └── main.js               # Punto de entrada de la aplicación
├── public/                   # Archivos estáticos públicos
├── index.html                # Punto de entrada HTML
├── vite.config.js            # Configuración de Vite
├── package.json              # Dependencias y scripts
└── Dockerfile                # Configuración de build Docker
        

Tareas comunes

Crear un componente

Crea archivos .vue en src/components/:

<!-- src/components/Button.vue -->
<script setup>
defineProps({
  label: String
});

const emit = defineEmits(['click']);
</script>

<template>
  <button
    class="bg-blue-500 text-white px-4 py-2 rounded"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

Añadir una ruta

Edita src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

Usar un store de Pinia

Crea un store en src/stores/:

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    decrement() { this.count-- }
  }
});

Usar Tailwind CSS

Tailwind CSS 4 viene preconfigurado. Usa las clases directamente en tus plantillas:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Comandos útiles

Resolución de problemas

Flujo de despliegue

Cada vez que haces push de tu código a Git, tu aplicación se compila y despliega automáticamente:

La URL de tu aplicación desplegada sigue este formato:

https://<your-subdomain>-<repo-name>.<session-domain>

Ejemplo: https://student01-module-a.demo.nstrim.app