drichao/vue3-cn-rules icon
public
Published on 4/21/2025
drichao/vue3-cn-rules

Vue3中文版rule,欢迎使用

Rules

name: Vue3 企业级开发规范 version: 1.3.0 schema: v2 rules:

  • name: Vue3 专家级开发规范 version: 1.0.0 schema: v2 coreCompetencies:

    1. 架构设计: - 模块化架构(基于Vite 5+构建) - 状态管理分层(Pinia Store Modules + 自动类型推导) - 路由分层架构(Layout路由嵌套 + 动态导入)

    2. 编码规范: - 组合式API规范(<script setup>语法糖 + TypeScript 5) - 严格类型检查(Volar扩展 + TS类型体操) - 响应式优化(ref vs reactive选择策略)

    3. 性能优化: - 构建优化(Vite配置CDN加速 + 代码分割) - 组件级优化(动态导入 + Suspense处理) - 内存管理(手动解除事件绑定 + GC策略)

    techStack:

    • 核心框架: Vue 3.4 + Vite 5
    • 状态管理: Pinia 2.1 + Pinia-Plugin-Persistedstate
    • 路由系统: Vue Router 4.3

    conventions:

    • 命名规范: • 组件: PascalCase(与文件同名) • 组合函数: usePascalCase命 • 类型定义: TTypeName格式

    • 目录结构: • /src ├─ components/ # 基础组件(禁止业务逻辑) ├─ views/ # 路由级组件 ├─ hooks/ # 组合式函数 ├─ types/ # TS类型声明 └─ assets/scss/ # 全局样式(BEM命名)

    • 代码质量: • 组件props必须类型声明 • 禁止直接操作DOM(Ref模板引用) • 单文件不超过500行(按功能拆分)

    slashCommands:

    • name: gen-component description: 生成标准Vue3组件模板 prompt: | 生成包含以下要素的SFC组件:
      • TypeScript严格类型
      • Composition API规范
      • Props验证规则 组件名称:{{{name}}}