# Vue 质量门禁 ## 目录 - 工具链 - 测试策略 - 安全 - 可访问性 - 性能 - 兼容性与韧性 - 验证顺序 - 官方依据 ## 工具链 - 使用项目锁文件对应的包管理器和锁定版本，不生成第二种锁文件。 - 先使用 `package.json` 已有脚本；不要猜测脚本名或绕开项目封装。 - 对 Vue SFC 执行 `vue-tsc` 或项目等价类型检查，因为 Vite 的转译本身不进行完整类型检查。 - 使用项目既有 ESLint 和格式化配置。新项目优先 ESLint Flat Config、`eslint-plugin-vue` 推荐配置及与 TypeScript 匹配的规则集。 - 将格式交给自动化工具，把人工 Review 集中在行为、边界、类型和可维护性。 - 不在功能变更中顺便升级 lint 规则或全仓格式化。 ## 测试策略 按风险分配测试： - 纯函数、数据映射、validators：单元测试。 - composable：测试输入、状态转移、副作用和 cleanup；有组件生命周期依赖时通过宿主组件挂载。 - Pinia store：测试 actions、getters、状态转移和失败恢复。 - Vue 组件：以 props、emits、slots、可见 DOM 和用户交互等公开接口为中心。 - 页面和跨模块流程：组件集成测试或 E2E。 - 样式、原生事件、浏览器 API、cookie、storage 和网络失败：使用真实浏览器环境验证关键路径。 遵守以下规则： - 优先测试用户可观察行为，不测试私有 ref、内部方法调用顺序或 CSS 实现细节。 - 覆盖 success、loading、empty、error、disabled、边界值和竞态中与变更相关的状态。 - 不只依赖 snapshot；为关键结果写有意义的断言。 - 只 mock 稳定边界，例如网络、时间或第三方 SDK；不要把所有子组件都 stub 掉而失去集成价值。 - 修复缺陷时先添加可复现失败的回归测试；无法自动化时记录人工复现和验证步骤。 - 覆盖率用于发现盲区，不用单一百分比替代风险判断。新改动的关键分支必须有证据。 ## 安全 - 将模板插值作为默认文本输出方式；未经可信 sanitizer 处理，不渲染外部或用户提供的 HTML。 - 不把用户输入直接拼接到 URL、style、动态组件、下载文件名或 DOM API；按上下文校验与编码。 - 将认证和授权建立在后端；前端 guard、隐藏按钮和 store 状态只改善体验。 - 不把 secrets、私钥、服务账号、数据库凭据或长期 token 放入仓库、bundle、localStorage 或 `VITE_*`。 - 对 access token 的存储和刷新遵循项目安全架构，不自行发明持久化方案。 - 外部链接、重定向和回调地址使用 allowlist 或严格校验，防止开放重定向。 - 对敏感操作处理 CSRF、重放、重复提交和权限失败，具体机制由后端契约决定。 - 日志、错误提示、埋点和测试夹具必须脱敏。 - 依赖升级和安全修复必须独立评估兼容性并运行回归，不把审计告警机械等同于可利用漏洞。 ## 可访问性 - 优先使用原生语义元素，只有原生语义不足时才增加 ARIA。 - 所有交互可用键盘完成，并有可见焦点。 - 图标按钮提供可访问名称；装饰图标从辅助技术隐藏。 - 表单控件关联 label，错误消息可被识别，必填和 invalid 状态不只依赖颜色。 - 弹窗、抽屉和菜单管理初始焦点、焦点陷阱、Escape 和关闭后的焦点恢复。 - 路由切换按产品结构更新标题、主标题或焦点，使屏幕阅读器用户感知页面变化。 - 保持颜色对比、文本缩放、触控目标和减少动画支持。 - 动态状态变化需要时使用合适 live region，但避免过度播报。 ## 性能 - 先测量再优化，区分首屏加载与交互更新性能。 - 页面组件使用路由级代码分割；大型可选功能和低频组件按需求异步加载。 - 选择可 tree-shake 的导入，避免引入完整工具库只使用一个函数。 - 保持 props 稳定，减少不必要的子树更新；不要滥用 `v-memo`、`v-once` 或手工缓存。 - 大型列表评估虚拟滚动；大型不可变数据评估浅层响应式。 - 避免过度组件抽象导致额外实例和更新层级，尤其在大列表内。 - 图片设置合理尺寸、格式和懒加载策略，防止布局偏移。 - 请求去重、缓存和预取必须有失效规则，不能以陈旧数据换取表面速度。 - 将 bundle 体积变化纳入新增依赖或大功能的验证。 ## 兼容性与韧性 - 按项目 `browserslist`、目标运行时和 SSR 环境验证，不假设仅运行在最新 Chrome。 - 对网络慢、离线、超时、重复点击、刷新、返回、并发导航和权限过期处理适用状态。 - 清理组件卸载后的回调，防止内存泄漏和卸载后更新。 - 全局错误边界不得吞掉错误；提供用户恢复路径并保留脱敏诊断。 - 破坏性 UI 或数据操作需要明确确认、撤销或恢复策略。 ## 验证顺序 先读取脚本，再按变更风险选择命令： 1. 运行最相关的单个或少量测试。 2. 运行 lint。 3. 运行 `vue-tsc`/typecheck。 4. 运行相关测试套件或覆盖率。 5. 运行 production build。 6. 对关键用户路径执行浏览器或 E2E 冒烟。 若修改共享组件、路由、store、请求基础层、构建配置或公共类型，扩大到所有受影响调用方。任何跳过项都必须标为未验证，不得推测通过。 ## 官方依据 - [Vue 测试指南](https://vuejs.org/guide/scaling-up/testing.html) - [Vue 工具链](https://vuejs.org/guide/scaling-up/tooling.html) - [Vitest Coverage](https://vitest.dev/guide/coverage.html) - [Vue 安全最佳实践](https://vuejs.org/guide/best-practices/security.html) - [Vue 可访问性最佳实践](https://vuejs.org/guide/best-practices/accessibility.html) - [Vue 性能最佳实践](https://vuejs.org/guide/best-practices/performance.html) - [Vite 环境变量与安全提示](https://vite.dev/guide/env-and-mode)