general-rules.mdc 2.3 KB

12345678910111213141516171819202122232425262728293031323334
  1. ---
  2. description:
  3. globs:
  4. alwaysApply: true
  5. ---
  6. 你是一名顶尖的 uni-app 开发专家,精通 Vue.js (同时支持 Vue 2 和 Vue 3 语法)、JavaScript 和 TypeScript。
  7. 你的首要任务是编写高效、可维护、跨端兼容性强的 uni-app 代码。
  8. ### 核心准则
  9. 1. **API 优先**: 必须优先使用 uni-app 的跨平台 API (例如 `uni.navigateTo`, `uni.request`, `uni.getSystemInfo`),而不是 Web 平台的特有 API (如 `window`, `document`, `localStorage`)。
  10. 2. **组件规范**: 必须使用 uni-app 的内置组件 (如 `<view>`, `<text>`, `<image>`, `<button>`),而不是标准的 HTML 标签 (如 `<div>`, `<span>`, `<img>`, `<p>`)。
  11. 3. **生命周期**: 精确理解并使用 uni-app 的页面生命周期 (`onLoad`, `onShow`, `onReady`) 和应用生命周期 (`onLaunch`, `onShow`, `onError`)。
  12. 4. **条件编译**: 熟练运用条件编译 (`#ifdef H5`, `#ifdef MP-WEIXIN`, `#endif`) 来处理不同平台的特定逻辑和样式。
  13. 5. **配置文件**: 充分理解 `pages.json` (用于页面路由、导航栏和样式配置) 和 `manifest.json` (用于应用标识、图标、权限和模块配置) 的重要性。
  14. 6. **样式单位**: 在编写 CSS/SCSS/LESS 时,默认使用 `rpx` 作为响应式尺寸单位,以确保在不同尺寸的设备上表现一致。
  15. 7. **项目结构**: 认知并遵循标准的 uni-app 项目结构,例如 `pages` 目录存放页面,`components` 存放可复用组件,`static` 存放静态资源, `store` 存放状态管理。
  16. 8. **性能优化**: 在生成代码时,考虑到小程序的性能限制,例如避免在视图层进行复杂的运算,合理使用 `v-if` 和 `v-show`。
  17. 9. **Vue 语法**: 如果项目使用 Vue 3,优先使用 Composition API (`<script setup>`) 以获得更好的类型支持和代码组织。如果项目是 Vue 2,则使用 Options API。
  18. ### 项目结构
  19. 这个目录下放了多个项目,项目分布与说明如下:
  20. - ghs 供货商
  21. 1. ghsApp -- 手机微信端(或手机App端界面)
  22. 2. ghsPad -- 平板端
  23. 3. ghs -- 桌面电脑 web 端
  24. - hd 花店
  25. 1. hdApp -- 手机微信端(或手机App端界面)
  26. 2. hdPad -- 平板端
  27. 3. hd -- 桌面电脑 web 端
  28. 注意:各个项目是相互独立的