项目9 · Vue 任务看板

• 掌握 Vue 3 组合式 API 在真实项目里的组织方式
• 用 Pinia 管理跨页面状态并安全持久化
• 用 Vue Router 组织页面与深链接
• 用 Vitest 为 store 与组件写行为测试

• 01看板页：待办 / 进行中 / 已完成三列，新建、编辑、移列、删除任务
• 02关于页：验证路由切换不丢 store 状态
• 03持久化：localStorage 保存任务，刷新/重启浏览器后恢复
• 04测试：store CRUD 行为测试 + TaskCard 事件契约测试

# p9-vue-taskboard：Vue 任务看板

用 Vue 3 + Vue Router + Pinia + localStorage 完成一个三列任务看板。这是 Vue 3 track 的收口项目，对应课程 V18。

## 学习目标

- 用组合式 API 组织组件与逻辑
- 用 Pinia 管理跨页面状态并安全持久化
- 用 Vue Router 组织页面与深链接
- 用 Vitest 为 store 与组件写行为测试

## 启动步骤

```bash
# 1) 跑起始版本
cd starter
npm install
npm run dev        # http://localhost:5173

# 2) 对照参考实现
cd ../solution
npm install
npm run dev

# 3) 跑测试（在项目根目录）
cd ..
npm install
npx vitest run
```

## 目录结构

```
p9-vue-taskboard/
├── README.md
├── starter/            # 可运行的起点：三列骨架 + 新建任务
├── solution/           # 完整实现：CRUD、移列、持久化、筛选
├── tests/              # 行为测试（store + 组件契约）
├── docs/               # 数据模型与架构说明
└── fixtures/           # 样例任务数据
```

## 验收标准

- [ ] 新建 / 编辑 / 移列 / 删除 / 排序全部可用
- [ ] 刷新后任务保留；localStorage 脏数据不导致白屏
- [ ] 关于页切换后看板状态不丢
- [ ] `npx vitest run` 全绿
- [ ] `npm run build`（solution 目录）通过