From 83908536c63becb8c41464c2fb3a31b207d29c2a Mon Sep 17 00:00:00 2001 From: feige996 <1020102647@qq.com> Date: Tue, 12 Aug 2025 09:55:40 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=20cursor-rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/rules/api-http-patterns.mdc | 51 +++++++++++++++++++ .cursor/rules/development-workflow.mdc | 41 +++++++++++++++ .cursor/rules/project-overview.mdc | 34 +++++++++++++ .cursor/rules/styling-css-patterns.mdc | 54 ++++++++++++++++++++ .cursor/rules/uni-app-patterns.mdc | 62 +++++++++++++++++++++++ .cursor/rules/vue-typescript-patterns.mdc | 47 +++++++++++++++++ 6 files changed, 289 insertions(+) create mode 100644 .cursor/rules/api-http-patterns.mdc create mode 100644 .cursor/rules/development-workflow.mdc create mode 100644 .cursor/rules/project-overview.mdc create mode 100644 .cursor/rules/styling-css-patterns.mdc create mode 100644 .cursor/rules/uni-app-patterns.mdc create mode 100644 .cursor/rules/vue-typescript-patterns.mdc diff --git a/.cursor/rules/api-http-patterns.mdc b/.cursor/rules/api-http-patterns.mdc new file mode 100644 index 0000000..79026c3 --- /dev/null +++ b/.cursor/rules/api-http-patterns.mdc @@ -0,0 +1,51 @@ +# API 和 HTTP 请求规范 + +## HTTP 请求封装 +- 可以使用 `简单http` 或者 `alova` 或者 `@tanstack/vue-query` 进行请求管理 +- HTTP 配置在 [src/http/](mdc:src/http/) 目录下 +- `简单http` - [src/http/http.ts](mdc:src/http/http.ts) +- `alova` - [src/http/alova.ts](mdc:src/http/alova.ts) +- `vue-query` - [src/http/vue-query.ts](mdc:src/http/vue-query.ts) +- 请求拦截器在 [src/http/interceptor.ts](mdc:src/http/interceptor.ts) +- 支持请求重试、缓存、错误处理 + +## API 接口规范 +- API 接口定义在 [src/api/](mdc:src/api/) 目录下 +- 按功能模块组织 API 文件 +- 使用 TypeScript 定义请求和响应类型 +- 支持 `简单http`、`alova` 和 `vue-query` 三种请求方式 + + +## 示例代码结构 +```typescript +// API 接口定义 +export interface LoginParams { + username: string + password: string +} + +export interface LoginResponse { + token: string + userInfo: UserInfo +} + +// alova 方式 +export const login = (params: LoginParams) => + http.Post('/api/login', params) + +// vue-query 方式 +export const useLogin = () => { + return useMutation({ + mutationFn: (params: LoginParams) => + http.post('/api/login', params) + }) +} +``` + +## 错误处理 +- 统一错误处理在拦截器中配置 +- 支持网络错误、业务错误、认证错误等 +- 自动处理 token 过期和刷新 +--- +globs: src/api/*.ts,src/http/*.ts +--- diff --git a/.cursor/rules/development-workflow.mdc b/.cursor/rules/development-workflow.mdc new file mode 100644 index 0000000..7a8c901 --- /dev/null +++ b/.cursor/rules/development-workflow.mdc @@ -0,0 +1,41 @@ +# 开发工作流程 + +## 项目启动 +1. 安装依赖:`pnpm install` +2. 开发环境: + - H5: `pnpm dev` 或 `pnpm dev:h5` + - 微信小程序: `pnpm dev:mp` + - APP: `pnpm dev:app` + +## 代码规范 +- 使用 ESLint 进行代码检查:`pnpm lint` +- 自动修复代码格式:`pnpm lint:fix` +- 使用 eslint 格式化代码 +- 遵循 TypeScript 严格模式 + +## 构建和部署 +- H5 构建:`pnpm build:h5` +- 小程序构建:`pnpm build:mp` +- APP 构建:`pnpm build:app` +- 类型检查:`pnpm type-check` + +## 开发工具 +- 推荐使用 VSCode 编辑器 +- 安装 Vue 和 TypeScript 相关插件 +- 使用 uni-app 开发者工具调试小程序 +- 使用 HBuilderX 调试 APP + +## 调试技巧 +- 使用 console.log 和 uni.showToast 调试 +- 利用 Vue DevTools 调试组件状态 +- 使用网络面板调试 API 请求 +- 平台差异测试和兼容性检查 + +## 性能优化 +- 使用懒加载和代码分割 +- 优化图片和静态资源 +- 减少不必要的重渲染 +- 合理使用缓存策略 +--- +description: 开发工作流程和最佳实践指南 +--- diff --git a/.cursor/rules/project-overview.mdc b/.cursor/rules/project-overview.mdc new file mode 100644 index 0000000..335b480 --- /dev/null +++ b/.cursor/rules/project-overview.mdc @@ -0,0 +1,34 @@ +--- +alwaysApply: true +--- +# unibest 项目概览 + +这是一个基于 uniapp + Vue3 + TypeScript + Vite5 + UnoCSS 的跨平台开发框架。 + +## 项目特点 +- 支持 H5、小程序、APP 多平台开发 +- 使用最新的前端技术栈 +- 内置约定式路由、layout布局、请求封装等功能 +- 无需依赖 HBuilderX,支持命令行开发 + +## 核心配置文件 +- [package.json](mdc:package.json) - 项目依赖和脚本配置 +- [vite.config.ts](mdc:vite.config.ts) - Vite 构建配置 +- [pages.config.ts](mdc:pages.config.ts) - 页面路由配置 +- [manifest.config.ts](mdc:manifest.config.ts) - 应用清单配置 +- [uno.config.ts](mdc:uno.config.ts) - UnoCSS 配置 + +## 主要目录结构 +- `src/pages/` - 页面文件 +- `src/components/` - 组件文件 +- `src/layouts/` - 布局文件 +- `src/api/` - API 接口 +- `src/http/` - HTTP 请求封装 +- `src/store/` - 状态管理 +- `src/tabbar/` - 底部导航栏 + +## 开发命令 +- `pnpm dev` - 开发 H5 版本 +- `pnpm dev:mp` - 开发微信小程序 +- `pnpm dev:app` - 开发 APP 版本 +- `pnpm build` - 构建生产版本 diff --git a/.cursor/rules/styling-css-patterns.mdc b/.cursor/rules/styling-css-patterns.mdc new file mode 100644 index 0000000..25f14f2 --- /dev/null +++ b/.cursor/rules/styling-css-patterns.mdc @@ -0,0 +1,54 @@ +# 样式和 CSS 开发规范 + +## UnoCSS 原子化 CSS +- 项目使用 UnoCSS 作为原子化 CSS 框架 +- 配置在 [uno.config.ts](mdc:uno.config.ts) +- 支持预设和自定义规则 +- 优先使用原子化类名,减少自定义 CSS + +## SCSS 规范 +- 使用 SCSS 预处理器 +- 样式文件使用 `lang="scss"` 和 `scoped` 属性 +- 遵循 BEM 命名规范 +- 使用变量和混入提高复用性 + +## 样式组织 +- 全局样式在 [src/style/](mdc:src/style/) 目录下 +- 组件样式使用 scoped 作用域 +- 图标字体在 [src/style/iconfont.css](mdc:src/style/iconfont.css) +- 主题变量在 [src/uni_modules/uni-scss/](mdc:src/uni_modules/uni-scss/) 目录下 + +## 示例代码结构 +```vue + + + + +## 响应式设计 +- 使用 rpx 单位适配不同屏幕 +- 支持横屏和竖屏布局 +- 使用 flexbox 和 grid 布局 +- 考虑不同平台的样式差异 +--- +globs: *.vue,*.scss,*.css +--- diff --git a/.cursor/rules/uni-app-patterns.mdc b/.cursor/rules/uni-app-patterns.mdc new file mode 100644 index 0000000..956566d --- /dev/null +++ b/.cursor/rules/uni-app-patterns.mdc @@ -0,0 +1,62 @@ +# uni-app 开发规范 + +## 页面开发 +- 页面文件放在 [src/pages/](mdc:src/pages/) 目录下 +- 使用约定式路由,文件名即路由路径 +- 页面配置在仅需要在 `route-block` 中配置标题等内容即可,会自动生成到 `pages.json` 中 + +## 组件开发 +- 组件文件放在 [src/components/](mdc:src/components/) 目录下 +- 使用 uni-app 内置组件和第三方组件库 +- 支持 wot-design-uni\uv-ui\uview-plus 等多种第三方组件库 和 z-paging 组件 +- 自定义组件遵循 uni-app 组件规范 + +## 平台适配 +- 使用条件编译处理平台差异 +- 支持 H5、小程序、APP 多平台 +- 注意各平台的 API 差异 +- 使用 uni.xxx API 替代原生 API + +## 示例代码结构 +```vue + + + +``` + +## 生命周期 +- 使用 uni-app 页面生命周期 +- onLoad、onShow、onReady、onHide、onUnload +- 组件生命周期遵循 Vue3 规范 +- 注意页面栈和导航管理 +--- +globs: src/pages/*.vue,src/components/*.vue +--- diff --git a/.cursor/rules/vue-typescript-patterns.mdc b/.cursor/rules/vue-typescript-patterns.mdc new file mode 100644 index 0000000..371700f --- /dev/null +++ b/.cursor/rules/vue-typescript-patterns.mdc @@ -0,0 +1,47 @@ +# Vue3 + TypeScript 开发规范 + +## Vue 组件规范 +- 使用 Composition API 和 ` + + + + +--- +globs: *.vue,*.ts,*.tsx +---