60 lines
1.4 KiB
Plaintext
60 lines
1.4 KiB
Plaintext
---
|
|
description: 前端开发规范
|
|
globs:
|
|
alwaysApply: false
|
|
---
|
|
# 前端开发规范
|
|
|
|
## 技术栈
|
|
- Nuxt.js (TypeScript模式)
|
|
- Vue 3
|
|
- TypeScript
|
|
|
|
## 目录结构规范
|
|
```
|
|
frontend/
|
|
├── components/ # 可复用组件
|
|
├── pages/ # 页面组件
|
|
├── composables/ # 组合式函数
|
|
├── types/ # TypeScript类型定义
|
|
├── utils/ # 工具函数
|
|
└── assets/ # 静态资源
|
|
```
|
|
|
|
## 命名规范
|
|
1. 组件文件使用 PascalCase 命名
|
|
2. 工具函数和组合式函数使用 camelCase 命名
|
|
3. 类型定义使用 PascalCase 并以 Type 或 Interface 结尾
|
|
|
|
## 组件开发规范
|
|
1. 使用组合式API (Composition API)
|
|
2. 组件必须使用 TypeScript
|
|
3. Props 必须定义类型和默认值
|
|
4. 组件必须包含适当的注释说明
|
|
|
|
## 状态管理
|
|
1. 使用 Pinia 进行状态管理
|
|
2. 按功能模块划分 store
|
|
3. 避免在组件中直接修改 store 状态
|
|
|
|
## 样式规范
|
|
1. 使用 SCSS 预处理器
|
|
2. 遵循 BEM 命名规范
|
|
3. 优先使用 Tailwind CSS 工具类
|
|
|
|
## 性能优化
|
|
1. 组件按需加载
|
|
2. 合理使用缓存
|
|
3. 图片资源优化
|
|
4. 避免不必要的重渲染
|
|
|
|
## 错误处理
|
|
1. 统一的错误处理机制
|
|
2. 友好的错误提示
|
|
3. 网络请求错误处理
|
|
|
|
## 代码质量
|
|
1. 使用 ESLint 进行代码检查
|
|
2. 使用 Prettier 进行代码格式化
|
|
|
|
3. 提交前进行代码审查 |