vue.js项目实战案例详细源码讲解

大家好，我是程序员小羊！

前言：

为帮助大家更好地掌握Vue.js项目的开发流程，我将为你讲解一个完整的Vue.js实战案例，并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程，适合用于构建一个具有基本CRUD功能的简单任务管理应用。

案例介绍

我们将开发一个任务管理应用（Task Manager），它允许用户添加、查看、编辑和删除任务。这个应用将包括以下主要功能模块：

任务列表显示：展示所有任务的列表。
添加任务：允许用户添加新的任务。
编辑任务：支持用户编辑现有任务。
删除任务：允许用户删除任务。

一、项目初始化

1. 创建Vue项目

首先，我们使用Vue CLI来创建一个新的Vue项目。确保你已经安装了Vue CLI，如果没有，可以通过以下命令安装：

bash 复制代码

npm install -g @vue/cli

然后使用以下命令创建一个新的Vue项目：

bash 复制代码

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 组件，用于显示任务列表。

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 组件，用于添加新的任务。

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 组件组合起来，并管理任务的添加、编辑和删除操作。

vue 复制代码

<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删除任务。

四、运行项目

最后，运行项目并在浏览器中查看效果：

bash 复制代码

npm run serve

打开浏览器，访问 http://localhost:8080，你将看到任务管理应用的界面，可以添加、编辑和删除任务。

结语

通过这个Vue.js项目实战案例，我们学习了如何创建组件、管理状态和处理事件。这个案例覆盖了Vue.js中的一些核心概念，如组件通信、事件处理、条件渲染和列表渲染。希望这个详细的源码讲解对你有所帮助，为你今后的Vue.js开发提供参考。如果你有任何问题或想深入了解某个部分，随时告诉我！

结尾

csharp 复制代码

今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文