109 lines
5.9 KiB
Markdown
109 lines
5.9 KiB
Markdown
# 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)
|
|
|