Ejercicio de programación con Vuejs: Gestión de tareas con estado global y API
Proyecto
Ejercicios de programación de Vue.js proyecto real: desarrolla una aplicación de gestión de tareas con estado global, consumo de API externa, Vue Router y composables usando TypeScript. Mejora tus habilidades con este ejercicio práctico actualizado.
- Configuración del proyecto:
- Utiliza Vue CLI o Vite para inicializar un nuevo proyecto Vue.js 3 con soporte para TypeScript.
- Instala las dependencias necesarias:
vue-router,vuex.
- Estructura de carpetas:
- Organiza tu proyecto con una estructura clara, separando componentes, vistas, stores y composables.
- Implementación de componentes y vistas:
- Crea los componentes necesarios para:
- Lista de tareas: Muestra todas las tareas.
- Detalle de tarea: Muestra los detalles de una tarea seleccionada.
- Formulario de tarea: Permite crear y editar tareas.
- Crea los componentes necesarios para:
- Configuración de Vue Router:
- Define las rutas para las diferentes vistas de la aplicación (lista de tareas, detalle de tarea, formulario de tarea).
- Estado global con Vuex:
- Configura Vuex para gestionar el estado de las tareas.
- Define acciones para interactuar con la API externa (obtener, crear, actualizar y eliminar tareas).
- Consumo de API externa:
- Utiliza Fetch para realizar peticiones HTTP a la API externa.
- Asegúrate de manejar los posibles errores en las comunicaciones.
- Uso de composables:
- Identifica lógica que pueda ser reutilizable y crea composables para ello (por ejemplo, manejo de peticiones, validaciones, etc.).
- Interfaz de usuario:
- Aplica estilos CSS para mejorar la apariencia de la aplicación.
- Asegura la responsividad y usabilidad en diferentes dispositivos.
- Pruebas y optimización:
- Verifica que todas las funcionalidades funcionan correctamente.
- Revisa el código para asegurar buenas prácticas y eliminar código innecesario.
Más ejercicios de programación con Vuejs
Evalúa tus conocimientos en Vuejs con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Solicitud HTTP con Axios
Código
Estilización de componentes en Vue.js
Código
Comunicación de componentes con props
Código
Uso de hooks de ciclo de vida en Vue
Código
Introducción a los componentes
Test
Introducción a Vue
Test
Navegación programática y redirección
Puzzle
Uso de la directiva v-if en Vuejs
Puzzle
Crear componente Composition API
Código
Realizar una solicitud GET con Fetch API en Vue
Código
Uso avanzado de los composables
Puzzle
Galería de imágenes con navegación y rutas
Proyecto
Uso de rutas anidadas y dinámicas
Test
Definición y manejo de rutas en Vue
Código
Uso de la directiva v-for en Vuejs
Código
Manejo de eventos con v-on
Puzzle
Crear un componente con Options API en Vue
Código
Creación de rutas con Vue Router
Código
Uso básico de los composables
Test
Binding bidireccional con v-model y defineModel
Test
Certificados de superación de Vuejs
Supera todos los retos de Vuejs y obtén certificados de superación para mejorar tu currículum y empleabilidad.
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio
Visual Studio Code
GitHub