---
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. 提交前进行代码审查