En este proyecto, vamos a aplicar los conocimientos adquiridos en los módulos anteriores para construir una aplicación de lista de tareas (To-Do List) utilizando Vue.js. Este proyecto te permitirá consolidar conceptos clave como componentes, gestión de estado, y enrutamiento.
Objetivos del Proyecto
- Crear una aplicación Vue.js desde cero.
- Utilizar componentes para estructurar la aplicación.
- Implementar Vue Router para la navegación.
- Gestionar el estado de la aplicación con Vuex.
- Aplicar directivas y bindings para la interacción del usuario.
Estructura del Proyecto
- Configuración del Proyecto
- Creación de Componentes
- Gestión del Estado con Vuex
- Implementación de Vue Router
- Estilización y Mejoras
- Configuración del Proyecto
Paso 1: Crear un Nuevo Proyecto Vue
Primero, asegúrate de tener Vue CLI instalado. Si no lo tienes, instálalo con el siguiente comando:
Luego, crea un nuevo proyecto:
Selecciona las opciones predeterminadas o personaliza según tus necesidades.
Paso 2: Instalar Dependencias Adicionales
Vamos a necesitar Vue Router y Vuex. Instálalos con los siguientes comandos:
- Creación de Componentes
Paso 1: Estructura de Componentes
Vamos a crear los siguientes componentes:
TodoList.vue: Para mostrar la lista de tareas.TodoItem.vue: Para representar cada tarea individual.AddTodo.vue: Para añadir nuevas tareas.
Paso 2: Implementación de TodoList.vue
<template>
<div>
<h1>Lista de Tareas</h1>
<AddTodo />
<ul>
<TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex';
import AddTodo from './AddTodo.vue';
import TodoItem from './TodoItem.vue';
export default {
components: {
AddTodo,
TodoItem
},
computed: {
...mapState(['todos'])
}
};
</script>Paso 3: Implementación de TodoItem.vue
<template>
<li>
<input type="checkbox" v-model="todo.completed" @change="toggleComplete" />
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
<button @click="removeTodo">Eliminar</button>
</li>
</template>
<script>
export default {
props: ['todo'],
methods: {
toggleComplete() {
this.$store.commit('toggleComplete', this.todo.id);
},
removeTodo() {
this.$store.commit('removeTodo', this.todo.id);
}
}
};
</script>
<style scoped>
.completed {
text-decoration: line-through;
}
</style>Paso 4: Implementación de AddTodo.vue
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Añadir nueva tarea" />
<button @click="addTodo">Añadir</button>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: ''
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.$store.commit('addTodo', this.newTodo);
this.newTodo = '';
}
}
}
};
</script>
- Gestión del Estado con Vuex
Paso 1: Configuración de Vuex
Crea un archivo store.js en la carpeta src y configura Vuex:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
todos: []
},
mutations: {
addTodo (state, text) {
state.todos.push({
id: Date.now(),
text,
completed: false
});
},
toggleComplete (state, id) {
const todo = state.todos.find(todo => todo.id === id);
if (todo) {
todo.completed = !todo.completed;
}
},
removeTodo (state, id) {
state.todos = state.todos.filter(todo => todo.id !== id);
}
}
});Paso 2: Integrar Vuex en la Aplicación
En main.js, importa y usa el store:
import Vue from 'vue';
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app');
- Implementación de Vue Router
Paso 1: Configuración de Rutas
Crea un archivo router.js en la carpeta src y configura Vue Router:
import Vue from 'vue';
import Router from 'vue-router';
import TodoList from './components/TodoList.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'TodoList',
component: TodoList
}
]
});Paso 2: Integrar Vue Router en la Aplicación
En main.js, importa y usa el router:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
- Estilización y Mejoras
Paso 1: Añadir Estilos Globales
Crea un archivo styles.css en la carpeta src y añade algunos estilos básicos:
body {
font-family: Arial, sans-serif;
}
h1 {
color: #42b983;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: #369f7d;
}Importa este archivo en main.js:
Conclusión
En este proyecto, hemos creado una aplicación de lista de tareas utilizando Vue.js. Hemos cubierto la creación de componentes, la gestión del estado con Vuex, y la navegación con Vue Router. Este proyecto te proporciona una base sólida para construir aplicaciones más complejas con Vue.js.
Próximos Pasos:
- Experimenta añadiendo nuevas funcionalidades, como la edición de tareas.
- Implementa persistencia de datos utilizando Local Storage o una API backend.
- Explora más sobre la optimización del rendimiento y pruebas en Vue.js.
¡Felicidades por completar tu primera aplicación Vue.js!
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)