转载

如何搭建组件库-基础实战篇？

本文从组件分类、命名、上传、设计走查等要点，梳理了如何搭建组件库。

如何搭建组件库-基础实战篇？

一、搭建组件库有什么好处？

让设计更高效、开发更迅速、产品体验更一致。很多大厂也做了自己的组件库，比如Ant Design，Element等，一个成熟的组件库确实让产品的体验更好，团队的效率更高。如果你也想开始搭建你们产品自己的组件库，希望本文能帮助到你。

重复使用，如果一个模块需要重复使用，那么可以认为它是一个组件，比如说Search Bar，Tab等。

参考Ant Design的分类方式，如果你们的开发采用Ant组件库的话，这样子的分类方式对开发小哥哥们也很友好。

提前把所有分类理清楚，后续组件的命名过程也会更加清晰。

（最开始自己就是没有理清思路，导致后续很多组件命名不清晰都重新来过，这些都是我含泪为你们踩过的坑啊）

Ant里面都属于基础通用组件，不同产品自身肯定还有更多的组件，这个时候需要自己去根据组件功能判断他们的分类。例如：我们可以参考Ant分为基础的7大类。

如何搭建组件库-基础实战篇？

可以大致分为3类，如图所示分别是：

如何搭建组件库-基础实战篇？

分类规则：为了给用户提供浏览内容的导航选项，我们都可以将它分为Nav这一类中。

分类规则：用户对该组件进行操作，改变或者更新产品内容。

分类规则：该组件仅只有展示功能。

分类规则：当用户操作后给予用户反馈的组件，主要是一些模态/非模态弹窗。

分类规则：组成以上组件的最基础的组件。包括一些线段，阴影，圆角方角卡片等。

分类规则：产品中所有的Icon都可以归为此类。

参考Ant Design的命名方式：将自己产品的所有symbol命名。这个过程最好和开发小哥哥共同商量一下，看看他们的命名喜好，后续他们的开发过程也会更轻松，团队的其他成员也会更加方便查找对应的组件。

命名规则： 分类/组件名称/等级/大小尺寸/样式/状态

如何搭建组件库-基础实战篇？

【分类】： 基础分类，第一部分的如何分类已经说过了，包括Nav，Button等
【组件名称】： 根据常用的组件名称命名，如果使用组件不常用，根据产品功能命名。当组件名称需求有子名称的时候可以中间使用.分割。例如：SlideMenu.Item
【等级】： 通常使用1.Primary 2.Secondary 3.Thirdary等
【大小尺寸】： 通常使用1.Default 1.Large 2.Small 等
【状态】： 通常使用1.Default 2.Hover 3.Selected 4.Disable 5.Value 6.Danger 等

注：所有命名都使用英文名称，且首字母大写。中文名称对于开发来说没有意义，重新拾起英语的时候到啦

（Ant的命名中，在分类前面有加上编号，是为了让你自己的组件库分类更加清晰，这个看你个人喜好）

在命名这一部分，开发其实只需要看组建名称和状态这两个部分，所以你的命名规范最好也是需要提前和开发小哥哥们一起商量一下的哦。