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