Este proyecto se utiliza como base de estudio y experimentación con Vue 3 + Vite, con el objetivo de estructurar, optimizar y estandarizar buenas prácticas en aplicaciones frontend.
Demo del Proyecto
Tecnologías
Áreas de Estudio
- Introducción: Estructura del proyecto, Vite, montaje de la app y filosofía del framework.
- Instalación + Vite: Configuración inicial del proyecto y dependencias.
- Template Syntax: Sintaxis de templates, interpolación, property binding, event binding y v-model.
- Componentes: Creación de componentes, comunicación con props y emits, encapsulación de estilos (scoped) y organización por carpetas.
- Props: Paso de datos desde padres a hijos.
- Emit / Eventos: Emisión de eventos y comunicación de hijos a padres.
- Estado Reactivo: Uso de ref y reactive para manejar datos reactivos en los componentes.
- Computed + Watch: Propiedades computadas, watchers para observar cambios de estado y lógica reactiva avanzada.
- Ciclo de Vida: Hooks del ciclo de vida (onMounted, onUpdated, onUnmounted, etc.).
- Composition API: Uso de setup(), toRefs, reactive y composición de lógica reutilizable.
- Composables (Reutilizar lógica): Funciones reutilizables para lógica compartida entre componentes.
- Consumo de APIs / Axios: Peticiones HTTP, manejo de errores y centralización de llamadas a APIs.
- Slots & Scoped Slots: Personalización de componentes hijos desde el padre, contenido dinámico y composición flexible.
- Router: Configuración de rutas, rutas dinámicas, navegación, lazy loading y guards.
- Pinia (Estado Global): Manejo de estado compartido entre componentes, stores y patrones recomendados.
- Optimización & Buenas Prácticas: Lazy loading de componentes, modularización, separación de responsabilidades y performance.
Instalación
- Requisitos Previos
- Descargar Proyecto.
- Tener Docker y Docker Compose instalados.
- Make: Utilizado para automatizar procesos y gestionar contenedores de manera más eficiente.
- Pasos de Instalación
- Clona el repositorio desde GitHub.
- Dentro del repositorio, encontrarás un archivo Makefile que contiene los comandos necesarios para iniciar y gestionar tu aplicación.
- Usa los siguientes comandos de Make para interactuar con la aplicación:
- make init-app: Inicializa la aplicación, copiando .env, creando symlinks, levantando contenedores, instalando dependencias y levantando el servidor de desarrollo.
- make up: Levanta la aplicación y sus contenedores asociados.
- make down: Detiene los contenedores y apaga la aplicación.
- make shell: Ingresa al contenedor para interactuar directamente con el sistema en su entorno de ejecución.
- make npm-install: Instala todas las dependencias definidas en package.json.
- make npm-host: Levanta el servidor de desarrollo (npm run dev) accesible desde tu máquina local.
- makebuild-prod: Genera la versión de producción de la aplicación (npm run build) y mueve los archivos compilados a la raíz del proyecto.
- Accede a los siguientes URL:
- Aplicación Web: http://localhost:5173/
