Vue3 任务管理系统

只学语法不做项目，等于纸上谈兵。本系列要做一个"任务管理系统"（TaskHub）：用户可以添加任务、标记完成、删除任务、按状态筛选，数据刷新后也不丢失。它规模适中，却覆盖了 Vue3 组件、响应式、计算属性、路由、状态管理与持久化等核心知识点，非常适合作为第一个完整实战项目。

系统要做什么

先想清楚需求，再写代码：

• 添加任务：输入标题后回车或点击按钮新增；
• 完成任务：勾选复选框切换完成状态；
• 删除任务：一键移除不再需要的任务；
• 筛选任务：按"全部 / 未完成 / 已完成"过滤；
• 数据持久化：刷新页面后任务依然保留。

技术选型

技术	作用
Vue3（组合式 API）	编写界面与逻辑
Vite	开发服务器与构建打包
Pinia	全局状态管理
Vue Router	页面路由跳转
localStorage	本地数据持久化

页面结构

整个应用只有一个主页面（后续章节会加统计页），从上到下依次是输入区、任务列表、筛选栏：

+----------------------------------------------------+
|  输入框：__________  [添加任务]                       |
+----------------------------------------------------+
|  [x] 学习 Vue3 教程        [删除]                    |
|  [ ] 完成任务管理系统      [删除]                    |
+----------------------------------------------------+
|  全部(2)  未完成(1)  已完成(1)                       |
+----------------------------------------------------+

核心数据模型

一条任务就是一个普通对象：

const task = {
  id: 1,             // 唯一标识，供 v-for 的 key 使用
  title: '学习 Vue3', // 任务标题
  done: false         // 是否已完成
}

最小可运行版本

不引入任何库，先用 ref 实现添加与删除，感受"数据驱动视图"：

<script setup>
import { ref } from 'vue'
const tasks = ref([])          // 任务数组
const title = ref('')          // 输入框内容
function addTask() {           // 添加任务
  if (!title.value.trim()) return
  tasks.value.push({ id: Date.now(), title: title.value, done: false })
  title.value = ''             // 清空输入框
}
function removeTask(id) {      // 删除任务
  tasks.value = tasks.value.filter(t => t.id !== id)
}
</script>
<template>
  <input v-model="title" placeholder="输入任务，回车添加"
         @keyup.enter="addTask" />
  <button @click="addTask">添加任务</button>
  <ul>
    <li v-for="t in tasks" :key="t.id">
      {{ t.title }} <button @click="removeTask(t.id)">删除</button>
    </li>
  </ul>
</template>

效果：输入内容回车后列表立即多出一行；点击删除，对应任务马上消失——我们只修改了数据，界面自动同步。

本系列的路线图

从搭环境到上线，一步步来：环境搭建 → 核心业务开发 → 组件拆分 → 状态管理与数据持久化 → 路由系统 → 逻辑复用与性能优化 → 项目部署。

小结

任务系统需求清晰、技术覆盖面广，是检验 Vue3 学习成果的绝佳载体。下一节先把开发环境搭起来。