第10篇：Vue 项目实战——构建一个小型应用

在前面章节中，我们已经学习了 Vue 的核心功能和性能优化技巧。本篇将结合之前的知识，构建一个完整的小型 Vue 应用。我们的目标是实现一个简单的待办事项管理工具（Todo List）。

1. 项目功能

我们的 Todo List 应用将实现以下功能：

• 添加待办事项
• 删除待办事项
• 标记待办事项为完成
• 展示未完成和已完成的事项

2. 项目结构

项目目录结构如下：

src/
|-- components/
|     |-- TodoItem.vue
|     |-- TodoList.vue
|-- views/
|     |-- Home.vue
|-- App.vue
|-- main.js

3. 创建项目和组件

步骤1：初始化项目

使用 Vue CLI 创建项目（可参考第一篇文章）：

vue create todo-app

步骤2：创建组件

在 src/components 目录下创建两个组件：TodoItem.vue 和 TodoList.vue。

TodoItem.vue

<template>
  <li>
    <input type="checkbox" v-model="item.completed" @change="$emit('update-item', item)" />
    <span :style="{ textDecoration: item.completed ? 'line-through' : 'none' }">
      {{ item.text }}
    </span>
    <button @click="$emit('delete-item', item.id)">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    item: Object
  }
};
</script>

<style scoped>
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
button {
  margin-left: 10px;
  cursor: pointer;
}
</style>

TodoList.vue

<template>
  <div>
    <h2>待办事项</h2>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入待办事项并按回车" />
    <ul>
      <TodoItem
        v-for="item in todos"
        :key="item.id"
        :item="item"
        @update-item="updateTodo"
        @delete-item="deleteTodo"
      />
    </ul>
  </div>
</template>

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

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          completed: false
        });
        this.newTodo = '';
      }
    },
    updateTodo(updatedItem) {
      const index = this.todos.findIndex(item => item.id === updatedItem.id);
      if (index !== -1) {
        this.todos[index] = updatedItem;
      }
    },
    deleteTodo(id) {
      this.todos = this.todos.filter(item => item.id !== id);
    }
  }
};
</script>

<style scoped>
input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}
ul {
  list-style: none;
  padding: 0;
}
</style>

4. 组合组件到 Home 页面

在 src/views/Home.vue 文件中使用 TodoList 组件。

<template>
  <div>
    <h1>我的待办事项应用</h1>
    <TodoList />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue';

export default {
  components: { TodoList }
};
</script>

<style scoped>
h1 {
  text-align: center;
  margin-top: 20px;
}
</style>

5. 主入口文件挂载应用

在 src/main.js 中挂载根组件。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './style.css';

createApp(App).mount('#app');

6. 运行项目

在终端运行以下命令启动项目：

npm run serve

打开浏览器，访问 http://localhost:8080，你将看到 Todo List 应用。

7. 总结

在本篇中，我们结合之前学习的内容，完成了一个小型的待办事项管理工具。通过这个项目，你学会了：

• 如何拆分组件并实现数据传递
• 如何管理状态和事件处理
• 如何整合 Vue 项目并实现具体功能

下一篇中，我们将学习 Vue 3 的组合式 API（Composition API），进一步提升代码的复用性和可维护性。