Cursor rule

1---
2description: 
3globs: *.vue,*.ts
4alwaysApply: false
5---
6---
7description: 现代Web应用的Vue.js最佳实践与模式
8globs: **/*.vue, **/*.ts, components/**/*
9---
10 
11# Vue.js 最佳实践
12 
13## 组件结构
14- 优先使用组合式API（Composition API）而非选项式API（Options API）
15- 保持组件小巧且职责单一
16- 合理集成TypeScript
17- 实现严谨的props验证
18- 规范声明emit事件
19- 保持模板逻辑简洁
20 
21## 组合式API
22- 合理使用ref与reactive
23- 规范实现生命周期钩子
24- 用组合式函数（Composables）封装可复用逻辑
25- 保持setup函数简洁
26- 规范使用计算属性（computed）
27- 实现合理的监听器（watchers）
28 
29## 状态管理
30- 使用Pinia进行状态管理
31- 保持存储模块化
32- 规范状态组合方式
33- 实现合理的actions
34- 规范使用getters
35- 正确处理异步状态
36 
37## 性能优化
38- 合理使用组件懒加载
39- 实现有效缓存策略
40- 规范使用计算属性
41- 避免不必要的监听器
42- 合理选择v-show与v-if
43- 规范管理key值
44 
45## 路由管理
46- 正确使用Vue Router
47- 实现规范的导航守卫
48- 规范使用路由元信息（meta字段）
49- 正确处理路由参数
50- 实现组件懒加载
51- 规范使用导航方法
52 
53## 表单处理
54- 合理使用v-model双向绑定
55- 实现严谨的表单验证
56- 规范处理表单提交
57- 显示合理的加载状态
58- 实现完善的错误处理
59- 规范表单重置逻辑
60 
61## TypeScript集成
62- 规范定义组件类型
63- 实现严谨的props类型
64- 规范声明emit事件类型
65- 处理合理的类型推断
66- 规范组合式函数类型
67- 实现严谨的存储类型
68 
69## 测试规范
70- 编写规范的单元测试
71- 实现严谨的组件测试
72- 正确使用Vue Test Utils
73- 规范测试组合式函数
74- 实现有效的模拟（Mocking）
75- 测试异步操作
76 
77## 通用最佳实践
78- 遵循Vue风格指南
79- 使用规范的命名约定
80- 保持组件组织有序
81- 实现完善的错误处理
82- 规范事件处理逻辑
83- 文档化复杂逻辑
84 
85## 构建与工具链
86- 使用Vite作为开发工具
87- 配置合理的构建设置
88- 规范环境变量管理
89- 实现有效的代码分割
90- 规范资源处理方式
91- 配置合理的优化策略 
92 
93## CSS样式要求
94- 所有样式必须使用UnoCSS框架生成，禁止直接编写原生CSS代码