92 lines
2.2 KiB
Markdown
92 lines
2.2 KiB
Markdown
---
|
|
description: 现代 Web 应用中的 Vue.js 最佳实践与模式
|
|
globs: **/*.vue, **/*.ts, components/**/*
|
|
---
|
|
|
|
# Vue.js 最佳实践
|
|
|
|
## 代码规划
|
|
- 代码简洁易于人类阅读
|
|
|
|
## 组件结构
|
|
- 优先使用组合式 API 而非选项式 API
|
|
- 保持组件小巧且功能专注
|
|
- 采用恰当的 TypeScript 集成方案
|
|
- 实现规范的 props 验证
|
|
- 使用标准的 emit 声明
|
|
- 保持模板逻辑简洁
|
|
- 优先使用template 语法，而不是函数组件
|
|
|
|
## 组合式 API
|
|
- 正确使用 ref 与 reactive
|
|
- 合理实现生命周期钩子
|
|
- 通过组合式函数封装可复用逻辑
|
|
- 保持 setup 函数整洁
|
|
- 规范使用计算属性
|
|
- 合理实现侦听器
|
|
|
|
## 状态管理
|
|
- 使用 Pinia 进行状态管理
|
|
- 保持仓库模块化
|
|
- 采用合理的状态组织方式
|
|
- 规范实现操作逻辑
|
|
- 正确使用获取器
|
|
- 妥善处理异步状态
|
|
|
|
## 性能优化
|
|
- 实现组件懒加载
|
|
- 配置恰当的缓存策略
|
|
- 高效使用计算属性
|
|
- 避免不必要的侦听器
|
|
- 区分使用 v-show 与 v-if
|
|
- 实现科学的 key 管理
|
|
|
|
## 路由管理
|
|
- 规范使用 Vue Router
|
|
- 实现完整的导航守卫
|
|
- 合理配置路由元字段
|
|
- 正确处理路由参数
|
|
- 实现路由懒加载
|
|
- 使用标准的导航方法
|
|
|
|
## 表单处理
|
|
- 正确使用 v-model
|
|
- 实现完善的验证机制
|
|
- 规范处理表单提交
|
|
- 展示合理的加载状态
|
|
- 配置完整的错误处理
|
|
- 实现表单重置功能
|
|
|
|
## TypeScript 集成
|
|
- 使用规范的组件类型定义
|
|
- 实现完整的 props 类型声明
|
|
- 规范 emit 类型声明
|
|
- 处理类型推断
|
|
- 使用标准的组合函数类型
|
|
- 实现完整的仓库类型定义
|
|
|
|
## 测试策略
|
|
- 编写规范的单元测试
|
|
- 实现完整的组件测试
|
|
- 正确使用 Vue Test Utils
|
|
- 全面测试组合式函数
|
|
- 实现科学的模拟机制
|
|
- 测试异步操作流程
|
|
|
|
## 开发规范
|
|
- 遵循 Vue 样式指南
|
|
- 使用统一的命名约定
|
|
- 保持组件结构清晰
|
|
- 实现完整的错误处理
|
|
- 规范事件处理机制
|
|
- 为复杂逻辑添加文档注释
|
|
- 文件名使用mutiword 示例 'ExamplePage'
|
|
|
|
## 构建与工具链
|
|
- 使用 Vite 进行开发
|
|
- 配置完整的构建方案
|
|
- 规范使用环境变量
|
|
- 实现代码分割方案
|
|
- 正确处理静态资源
|
|
- 配置完整的优化策略
|