大家好，我是程序员小羊！
前言：
为帮助大家更好地掌握Vue.js项目的开发流程，我将为你讲解一个完整的Vue.js实战案例，并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程，适合用于构建一个具有基本CRUD功能的简单任务管理应用。
案例介绍
我们将开发一个任务管理应用（Task Manager），它允许用户添加、查看、编辑和删除任务。这个应用将包括以下主要功能模块：
- 任务列表显示：展示所有任务的列表。
- 添加任务：允许用户添加新的任务。
- 编辑任务：支持用户编辑现有任务。
- 删除任务：允许用户删除任务。
一、项目初始化
1. 创建Vue项目
首先，我们使用Vue CLI来创建一个新的Vue项目。确保你已经安装了Vue CLI，如果没有，可以通过以下命令安装：
npm install -g @vue/cli
然后使用以下命令创建一个新的Vue项目：
vue create task-manager
根据提示选择默认的Vue 3配置。
2. 目录结构说明
项目创建后，目录结构如下：
task-manager/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── views/
│ ├── App.vue
│ ├── main.js
├── package.json
└── README.md
public/：存放静态资源。src/：主要代码目录，包括组件、页面视图、全局样式等。App.vue：根组件。main.js：入口文件，初始化Vue实例。
二、实现任务管理功能
1. 任务列表显示
我们首先在 src/components/ 目录下创建一个 TaskList.vue 组件，用于显示任务列表。
<template><div class="task-list"><h2>Task List</h2><ul><li v-for="task in tasks" :key="task.id">{{ task.name }}<button @click="editTask(task)">Edit</button><button @click="deleteTask(task.id)">Delete</button></li></ul></div>
</template><script>
export default {name: 'TaskList',props: {tasks: Array},methods: {editTask(task) {this.$emit('edit-task', task);},deleteTask(id) {this.$emit('delete-task', id);}}
}
</script><style scoped>
.task-list {margin: 20px;
}
</style>
- 模板部分：通过
v-for指令循环显示任务列表，并为每个任务提供编辑和删除按钮。 - 脚本部分：通过
props接收父组件传递的tasks数据，使用emit触发事件，将编辑和删除操作反馈给父组件。
2. 添加任务
在 src/components/ 目录下创建一个 AddTask.vue 组件，用于添加新的任务。
<template><div class="add-task"><h2>Add Task</h2><input v-model="taskName" placeholder="Enter task name" /><button @click="addTask">Add</button></div>
</template><script>
export default {name: 'AddTask',data() {return {taskName: ''};},methods: {addTask() {if (this.taskName.trim()) {this.$emit('add-task', this.taskName);this.taskName = '';}}}
}
</script><style scoped>
.add-task {margin: 20px;
}
</style>
- 模板部分：包含一个输入框和添加按钮。
v-model实现双向数据绑定，实时更新taskName。 - 脚本部分：
addTask方法会在点击按钮时被触发，并通过emit事件将任务名称传递给父组件。
3. 编辑任务
编辑任务的功能可以复用 AddTask.vue 组件，我们只需在父组件中处理传递的任务数据。
4. 删除任务
删除任务的功能已在 TaskList.vue 中通过 deleteTask 方法实现，它会调用 emit 事件将任务ID传递给父组件。
三、App.vue 组合各组件
在 App.vue 中，我们将 TaskList 和 AddTask 组件组合起来，并管理任务的添加、编辑和删除操作。
<template><div id="app"><h1>Task Manager</h1><AddTask @add-task="handleAddTask" /><TaskList:tasks="tasks"@edit-task="handleEditTask"@delete-task="handleDeleteTask"/></div>
</template><script>
import AddTask from './components/AddTask.vue';
import TaskList from './components/TaskList.vue';export default {name: 'App',components: {AddTask,TaskList},data() {return {tasks: [],currentTask: null};},methods: {handleAddTask(taskName) {if (this.currentTask) {// 编辑任务this.currentTask.name = taskName;this.currentTask = null;} else {// 添加新任务this.tasks.push({id: Date.now(),name: taskName});}},handleEditTask(task) {this.currentTask = task;},handleDeleteTask(id) {this.tasks = this.tasks.filter(task => task.id !== id);}}
}
</script><style>
#app {text-align: center;max-width: 600px;margin: 0 auto;
}
</style>
- 模板部分：渲染
AddTask和TaskList组件，并将必要的数据和方法通过props和events传递。 - 脚本部分：使用
data定义任务列表tasks和当前编辑的任务currentTask。在方法中处理任务的增删改逻辑。handleAddTask负责处理任务的添加和编辑操作。handleEditTask设置当前任务为选中的任务，以便在输入框中显示任务名称进行编辑。handleDeleteTask根据任务ID删除任务。
四、运行项目
最后，运行项目并在浏览器中查看效果：
npm run serve
打开浏览器，访问 http://localhost:8080，你将看到任务管理应用的界面，可以添加、编辑和删除任务。
结语
通过这个Vue.js项目实战案例，我们学习了如何创建组件、管理状态和处理事件。这个案例覆盖了Vue.js中的一些核心概念，如组件通信、事件处理、条件渲染和列表渲染。希望这个详细的源码讲解对你有所帮助，为你今后的Vue.js开发提供参考。如果你有任何问题或想深入了解某个部分，随时告诉我！
结尾
今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文
