第14篇：完整 Vue 应用项目实战

在前面的章节中，我们学习了 Vue 的基础知识、组件开发、路由管理、状态管理和单元测试等内容。本篇将整合这些内容，构建一个完整的待办事项应用（To-Do List）。

1. 项目结构

我们将使用以下项目结构：

src/
├── components/
│   ├── TodoItem.vue
│   └── TodoInput.vue
├── views/
│   ├── Home.vue
│   └── About.vue
├── router/
│   └── index.js
├── store/
│   └── index.js
├── App.vue
└── main.js

2. 搭建基础路由

在 src/router/index.js 中配置路由：

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

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 创建全局状态管理

在 src/store/index.js 中设置 Vuex Store：

// src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo);
    },
    REMOVE_TODO(state, index) {
      state.todos.splice(index, 1);
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('ADD_TODO', todo);
    },
    removeTodo({ commit }, index) {
      commit('REMOVE_TODO', index);
    }
  },
  getters: {
    todoCount(state) {
      return state.todos.length;
    }
  }
});

4. 构建组件

TodoInput.vue

<template>
  <div>
    <input v-model="newTodo" placeholder="添加新的任务" @keyup.enter="submitTodo" />
  </div>
</template>

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

TodoItem.vue

<template>
  <div>
    <p>{{ todo }}</p>
    <button @click="$emit('remove-todo')">删除</button>
  </div>
</template>

<script>
export default {
  props: ['todo']
};
</script>

5. 构建主页面

Home.vue

<template>
  <div>
    <h1>待办事项</h1>
    <TodoInput @add-todo="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <TodoItem :todo="todo" @remove-todo="removeTodo(index)" />
      </li>
    </ul>
    <p>总任务数：{{ todoCount }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import TodoInput from '@/components/TodoInput.vue';
import TodoItem from '@/components/TodoItem.vue';

export default {
  components: { TodoInput, TodoItem },
  computed: {
    ...mapState(['todos']),
    ...mapGetters(['todoCount'])
  },
  methods: {
    ...mapMutations(['ADD_TODO', 'REMOVE_TODO']),
    addTodo(todo) {
      this.ADD_TODO(todo);
    },
    removeTodo(index) {
      this.REMOVE_TODO(index);
    }
  }
};
</script>

6. 整合到主应用

在 App.vue 中配置路由：

<template>
  <div>
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于我们</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

7. 总结

在本篇中，你学习了如何整合 Vue 的路由、状态管理和组件，构建一个完整的待办事项应用。下一篇中，我们将探索 Vue 项目的部署与优化。