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>
93 lines
2.3 KiB
Markdown
93 lines
2.3 KiB
Markdown
---
|
||
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 进行开发
|
||
- 配置完整的构建方案
|
||
- 规范使用环境变量
|
||
- 实现代码分割方案
|
||
- 正确处理静态资源
|
||
- 配置完整的优化策略
|