---
description:
globs:
alwaysApply: true
---
### 技术栈
- Javascript
- Vue3
- vite
- axios
- element-plus
- pinia
- mockjs(vite-plugin-mock)
- sass

### 包管理器
- yarn

### 文件目录

- src/
  - assets/          # 静态资源文件
  - components/      # 公共组件
  - layouts/         # 布局组件
  - views/          # 页面视图组件
  - router/         # 路由配置
  - store/          # Pinia状态管理
  - api/            # API接口封装
  - utils/          # 工具函数
  - styles/         # 全局样式
  - mocks/           # Mock数据
  - App.vue         # 根组件
  - main.js         # 入口文件

### 开发规范

1. 命名规范
   - 组件名：大驼峰命名法，如 `UserProfile.vue`
   - 变量名：小驼峰命名法，如 `userInfo`
   - 常量名：全大写，下划线分隔，如 `API_BASE_URL`
   - 文件夹名：小写，中划线分隔，如 `user-center`

2. 代码风格
   - 使用 ESLint + Prettier 进行代码格式化
   - 组件内使用 `<script setup>` 语法
   - 遵循 Vue3 组合式 API 规范
   - 使用 JavaScript 进行类型检查
   - 保留必要的注释、console.log

3. 组件开发
   - 组件必须包含 name 属性
   - Props 必须定义类型和默认值
   - 使用 defineEmits 定义事件
   - 复杂组件需要添加注释说明
   - 高度组件化开发，细致到功能模块

4. 状态管理
   - 使用 Pinia 进行状态管理
   - Store 按功能模块划分
   - 避免在组件中直接修改 store 状态

5. 路由规范
   - 路由配置统一在 router 目录下管理
   - 使用路由懒加载
   - 路由命名遵循小驼峰命名法

6. API 规范
   - API 请求统一在 api 目录下管理
   - 新建请求需要引用utils/request.js
   - 统一错误处理
   - 请求参数和响应数据需要定义类型

7. mock 规范
   - 生产环境允许mock数据

8. 样式规范
   - 使用 SCSS 预处理器
   - 遵循 BEM 命名规范
   - 全局样式统一在 styles 目录下管理
   - 组件样式使用 scoped
   - 主题适配暗色和亮色

9. 提交规范
   - 遵循 Conventional Commits 规范
   - 提交信息必须清晰描述改动内容

   - 禁止提交大文件