88 lines
2.2 KiB
Plaintext
88 lines
2.2 KiB
Plaintext
---
|
|
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 规范
|
|
- 提交信息必须清晰描述改动内容
|
|
|
|
- 禁止提交大文件
|