前端UI组件开发规范书.docVIP

前端UI组件开发规范书

一、组件分类与命名规范

（一）组件分类

前端UI组件按照功能和使用场景可分为基础组件、业务组件和复合组件三大类。基础组件是构成界面的基本元素，如按钮、输入框、下拉选择器等，具有通用性强、复用率高的特点；业务组件则是针对特定业务场景开发的组件，例如电商系统中的商品卡片、订单列表，社交平台中的评论区、关注按钮等，这类组件与业务逻辑紧密结合；复合组件是由多个基础组件或业务组件组合而成的复杂组件，像表单组件、弹窗组件、导航菜单等，通常包含完整的交互流程。

（二）命名规范

组件名：采用PascalCase命名法，即每个单词的首字母大写，例如Button、InputField、UserCard。组件名应清晰反映组件的功能，避免使用模糊或缩写的名称，如不要用Btn代替Button，确保其他开发者能通过组件名快速理解其用途。

文件命名：与组件名保持一致，同样使用PascalCase命名法，文件后缀根据所使用的框架确定，如React框架下为.jsx或.tsx，Vue框架下为.vue。例如Button.jsx、UserCard.vue。

Props命名：使用camelCase命名法，即第一个单词小写，后续单词首字母大写，如buttonText、isDisabled、onClickHandler。Props名称应准确描述其作用，避免使用过于笼统的名称，如不要