El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Projecte 1: Aplicació de llista de tasques

Següent ►
►

Introducció

En aquest projecte, construirem una aplicació de llista de tasques utilitzant Vue.js. Aquest projecte ens permetrà aplicar els conceptes apresos en els mòduls anteriors i veure com es poden combinar per crear una aplicació funcional.

Objectius del Projecte

  1. Crear una aplicació Vue.js des de zero.
  2. Utilitzar components per estructurar l'aplicació.
  3. Implementar enllaç de dades i renderització condicional.
  4. Gestionar l'estat de l'aplicació amb Vuex.
  5. Utilitzar Vue Router per a la navegació.

Estructura del Projecte

  1. Configuració del projecte
  2. Creació de components
  3. Gestió de l'estat amb Vuex
  4. Navegació amb Vue Router
  5. Estilització de l'aplicació
  6. Desplegament

  1. Configuració del Projecte

Instal·lació de Vue CLI

Primer, assegura't de tenir instal·lat Vue CLI. Si no el tens, pots instal·lar-lo amb el següent comandament:

npm install -g @vue/cli

Creació del Projecte

Crea un nou projecte Vue utilitzant Vue CLI:

vue create todo-list-app

Segueix les instruccions per configurar el projecte segons les teves preferències.

Estructura del Projecte

Un cop creat el projecte, la seva estructura hauria de ser similar a aquesta:

todo-list-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

  1. Creació de Components

Component TodoItem

Crea un component per a cada tasca. A src/components/, crea un fitxer anomenat TodoItem.vue:

<template>
  <div class="todo-item">
    <input type="checkbox" v-model="todo.completed" @change="toggleComplete">
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <button @click="removeTodo">Eliminar</button>
  </div>
</template>

<script>
export default {
  props: {
    todo: Object
  },
  methods: {
    toggleComplete() {
      this.$emit('toggle-complete', this.todo);
    },
    removeTodo() {
      this.$emit('remove-todo', this.todo);
    }
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

Component TodoList

Crea un component per a la llista de tasques. A src/components/, crea un fitxer anomenat TodoList.vue:

<template>
  <div class="todo-list">
    <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @toggle-complete="toggleComplete"
      @remove-todo="removeTodo"
    />
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  props: {
    todos: Array
  },
  methods: {
    toggleComplete(todo) {
      this.$emit('toggle-complete', todo);
    },
    removeTodo(todo) {
      this.$emit('remove-todo', todo);
    }
  }
}
</script>

Component AddTodo

Crea un component per afegir noves tasques. A src/components/, crea un fitxer anomenat AddTodo.vue:

<template>
  <div class="add-todo">
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Afegeix una nova tasca">
    <button @click="addTodo">Afegeix</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.$emit('add-todo', this.newTodo);
        this.newTodo = '';
      }
    }
  }
}
</script>

  1. Gestió de l'Estat amb Vuex

Instal·lació de Vuex

Instal·la Vuex al teu projecte:

npm install vuex --save

Configuració de Vuex

A src/store/, crea un fitxer anomenat index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    ADD_TODO (state, todo) {
      state.todos.push(todo);
    },
    TOGGLE_COMPLETE (state, todo) {
      const index = state.todos.findIndex(t => t.id === todo.id);
      state.todos[index].completed = !state.todos[index].completed;
    },
    REMOVE_TODO (state, todo) {
      state.todos = state.todos.filter(t => t.id !== todo.id);
    }
  },
  actions: {
    addTodo ({ commit }, text) {
      const todo = {
        id: Date.now(),
        text,
        completed: false
      };
      commit('ADD_TODO', todo);
    },
    toggleComplete ({ commit }, todo) {
      commit('TOGGLE_COMPLETE', todo);
    },
    removeTodo ({ commit }, todo) {
      commit('REMOVE_TODO', todo);
    }
  },
  getters: {
    todos: state => state.todos
  }
});

Integració de Vuex a l'Aplicació

A src/main.js, importa i utilitza Vuex:

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');

  1. Navegació amb Vue Router

Instal·lació de Vue Router

Instal·la Vue Router al teu projecte:

npm install vue-router --save

Configuració de Vue Router

A src/router/, crea un fitxer anomenat index.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Integració de Vue Router a l'Aplicació

A src/main.js, importa i utilitza Vue 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');

Creació de la Vista Home

A src/views/, crea un fitxer anomenat Home.vue:

<template>
  <div class="home">
    <AddTodo @add-todo="addTodo" />
    <TodoList
      :todos="todos"
      @toggle-complete="toggleComplete"
      @remove-todo="removeTodo"
    />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import AddTodo from '../components/AddTodo.vue';
import TodoList from '../components/TodoList.vue';

export default {
  components: {
    AddTodo,
    TodoList
  },
  computed: {
    ...mapGetters(['todos'])
  },
  methods: {
    ...mapActions(['addTodo', 'toggleComplete', 'removeTodo'])
  }
}
</script>

  1. Estilització de l'Aplicació

Afegeix estils a src/App.vue per millorar l'aparença de l'aplicació:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

#app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.add-todo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.add-todo input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
}

.add-todo button {
  padding: 10px 20px;
  font-size: 16px;
  margin-left: 10px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item .completed {
  text-decoration: line-through;
  color: #999;
}

.todo-item button {
  background: none;
  border: none;
  color: #ff0000;
  cursor: pointer;
}
</style>

  1. Desplegament

Construcció per a Producció

Construeix l'aplicació per a producció:

npm run build

Desplegament

Segueix les instruccions de la teva plataforma de desplegament preferida per desplegar l'aplicació. Algunes opcions populars inclouen Netlify, Vercel, i GitHub Pages.

Conclusió

En aquest projecte, hem creat una aplicació de llista de tasques utilitzant Vue.js. Hem après a configurar un projecte Vue, crear components, gestionar l'estat amb Vuex, utilitzar Vue Router per a la navegació, estilitzar l'aplicació i desplegar-la. Aquest projecte ens ha permès aplicar els conceptes apresos en els mòduls anteriors i veure com es poden combinar per crear una aplicació funcional.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats