sion123
fb6d18b4f5
核心改进： - HTTP客户端：工厂函数模式，支持自定义拦截器和401/403处理 - 认证服务：函数式实现，消除this绑定问题，支持业务码+HTTP状态码双通道 - Token管理：简化为直接实例导出，移除bind()和箭头函数包装 - 路由守卫：优化逻辑，移除冗余代码，更简洁易维护 技术亮点： - 统一401/403错误处理（业务code和HTTP status双检查） - 自动刷新token并重试请求，保留自定义拦截器 - 分层清晰：clientAxios (Mono) -> http (应用) -> AuthService - 支持扩展：业务代码可创建自定义HTTP实例并添加拦截器 文件变更： - 新增 AuthService.js (函数式) 和 Login.vue - 重构 http.js、token-manager.js、router/index.js - 删除 TokenInput.vue、utils/auth.js 等冗余文件 - 更新所有API调用点使用直接实例导入 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2.3 KiB
2.3 KiB
description: 现代 Web 应用中的 Vue.js 最佳实践与模式
globs: /.vue, **/.ts, components//*
Vue.js 最佳实践
代码规划
- 代码简洁易于人类阅读
组件结构
- 优先使用组合式 API 而非选项式 API
- 保持组件小巧且功能专注
- 采用恰当的 TypeScript 集成方案
- 实现规范的 props 验证
- 使用标准的 emit 声明
- 保持模板逻辑简洁
- 优先使用template 语法，而不是函数组件
- 优先使用函数或者hook，而不是类
组合式 API
- 正确使用 ref 与 reactive
- 合理实现生命周期钩子
- 通过组合式函数封装可复用逻辑
- 保持 setup 函数整洁
- 规范使用计算属性
- 合理实现侦听器
状态管理
- 使用 Pinia 进行状态管理
- 保持仓库模块化
- 采用合理的状态组织方式
- 规范实现操作逻辑
- 正确使用获取器
- 妥善处理异步状态
性能优化
- 实现组件懒加载
- 配置恰当的缓存策略
- 高效使用计算属性
- 避免不必要的侦听器
- 区分使用 v-show 与 v-if
- 实现科学的 key 管理
路由管理
- 规范使用 Vue Router
- 实现完整的导航守卫
- 合理配置路由元字段
- 正确处理路由参数
- 实现路由懒加载
- 使用标准的导航方法
表单处理
- 正确使用 v-model
- 实现完善的验证机制
- 规范处理表单提交
- 展示合理的加载状态
- 配置完整的错误处理
- 实现表单重置功能
TypeScript 集成
- 使用规范的组件类型定义
- 实现完整的 props 类型声明
- 规范 emit 类型声明
- 处理类型推断
- 使用标准的组合函数类型
- 实现完整的仓库类型定义
测试策略
- 编写规范的单元测试
- 实现完整的组件测试
- 正确使用 Vue Test Utils
- 全面测试组合式函数
- 实现科学的模拟机制
- 测试异步操作流程
开发规范
- 遵循 Vue 样式指南
- 使用统一的命名约定
- 保持组件结构清晰
- 实现完整的错误处理
- 规范事件处理机制
- 为复杂逻辑添加文档注释
- 文件名使用mutiword 示例 'ExamplePage'
构建与工具链
- 使用 Vite 进行开发
- 配置完整的构建方案
- 规范使用环境变量
- 实现代码分割方案
- 正确处理静态资源
- 配置完整的优化策略