跳到主要内容

组件设计规范

设计原则​

1. 原子设计​

  • 原子（Atoms）：最基本的元素
  • 分子（Molecules）：简单组件组合
  • 有机体（Organisms）：复杂组件组合
  • 模板（Templates）：页面布局
  • 页面（Pages）：完整页面

2. 单一职责​

  • 每个组件只负责一个功能
  • 组件功能明确
  • 避免过度复杂

3. 可复用性​

  • 通用组件设计
  • 参数化配置
  • 多场景适用

组件分类​

基础组件​

  • 按钮、输入框、选择器
  • 布局组件
  • 反馈组件

业务组件​

  • 表单组件
  • 数据展示组件
  • 交互组件

页面组件​

  • 页面布局
  • 路由组件
  • 容器组件

命名规范​

组件命名​

  • PascalCase
  • 语义化命名
  • 避免缩写

文件命名​

  • kebab-case
  • 与组件名对应
  • 包含功能描述

组件结构​

目录结构​

components/
├── base/              # 基础组件
├── business/          # 业务组件
└── layout/            # 布局组件

文件结构​

ComponentName/
├── index.vue          # 组件入口
├── types.ts           # 类型定义
├── style.less         # 样式文件
└── README.md          # 组件文档

开发规范​

Props 设计​

  • 类型安全
  • 默认值
  • 验证规则

事件处理​

  • 事件命名规范
  • 参数传递
  • 事件冒泡

样式管理​

  • CSS 模块化
  • 主题变量
  • 响应式设计

测试规范​

单元测试​

  • 组件渲染测试
  • 交互测试
  • 边界测试

集成测试​

  • 组件组合测试
  • 页面流程测试
  • 用户体验测试