Vue 全栈项目实践

学习目标：使用 Vue 3 实现综合项目的完整前端，并接入与 React 版相同的后端 API 契约。

1. 依赖已有知识

先复习 Vue 基础、Vue 进阶与源码、TypeScript 与 浏览器网络。本项目练的是应用闭环，不重复每个 Vue API 的定义。

2. 页面与模块

src/
  app/router/          # 登录、列表、详情、编辑、404
  features/notes/api/  # 请求与响应解析
  features/notes/ui/   # 列表、表单、详情组件
  features/auth/       # 会话与权限显示
  shared/ui/           # 已证明确实共用的基础组件

使用 Vue Router 表达页面和可分享的筛选条件。ref 管输入和弹窗状态，computed 管派生视图；Pinia 只保存确需跨页面共享的客户端状态。服务端笔记列表应有加载、缓存、刷新与错误策略，不要只存一份永不过期的全局数组。

3. 按里程碑实现

1. 页面骨架：语义化导航、列表、详情、编辑表单和 404；窄屏与键盘可用。
2. 读数据：封装 API 客户端，校验响应，支持分页和搜索词 URL 同步。
3. 写数据：创建、编辑、删除；处理字段错误、重复提交和版本冲突。
4. 会话：登录后访问本人数据；对 401/403 给出不同反馈。授权最终由后端保证。
5. 质量：用组件测试验证表单与错误，用 Playwright 跑登录到创建笔记流程。
6. 交付：生产构建、环境配置、深层路由刷新、监控与回滚。

对照要求：与 React 版 使用同一套 API 类型、错误案例和验收用例；比较两套框架如何组织组件、状态和副作用，而不是比较总代码行数。

4. 完成标准

• 加载、空列表、失败、重试和无权限状态都能被用户辨识。
• 只用键盘也能创建、编辑和删除一条示例笔记。
• 页面刷新后搜索条件仍在；网络旧请求不会覆盖新搜索结果。
• 单元/组件测试和关键端到端测试在 CI 中通过。

5. 一条 Vue 纵向链路

先只做“打开列表—创建笔记—返回列表”。Router 定义 /notes 与 /notes/new；API 模块封装 GET /notes、POST /notes 并验证响应；列表组件管理加载、空结果和错误显示；表单组件负责输入和字段反馈。提交成功后更新或失效列表缓存，再导航回列表。确认刷新后数据仍在，说明后端确实持久化了数据。

import { computed, ref } from 'vue';

const title = ref('');
const submitting = ref(false);
const canSubmit = computed(() => title.value.trim().length > 0 && !submitting.value);

computed 适合由其他状态推导出的值；不要把 canSubmit 再存一份 ref 并靠 watch 手工同步。提交动作由用户事件触发，先验证、设提交中、调用 API，并在 finally 恢复按钮状态。若请求失败，保留输入并显示可读错误。

6. 双前端统一验收

用同一组示例数据和 API 契约分别跑 Vue、React：登录后只见本人数据；快速搜索不会被旧请求覆盖；创建失败保留输入；409 提示版本冲突；403 不显示假成功。两版组件实现可以不同，但测试意图和错误代码应相同。

练习：为 Vue 版写列表空状态、创建校验失败和用户 A 越权三类测试；最后用键盘完成创建流程。完整工程边界见 综合项目。