以 Vue 为例
按照功能职责划分的话，大概可以拆分为 4 层，越往下通用性越强，业务耦合度也就越低：
基础组件：一些业务无关的、原子的基础组件。我们常见的 antd-design, element-ui、iview 这些组件库提供的组件就属于基础组件。它的特征如下：
提供了构建一个页面所需的基础组件。它们是原子的，通常不能再往下拆分
符合设计规范的基础组件。它奠定了应用的整体设计风格。也就是说，如果我们需要对不同的客户定义不同的主题，应该在这一层去做，不要再上层耦合太多样式相关的定义。
通常我们有一个统一的主题配置文件去配置风格。如果上层组件需要定义样式，应该引用这个配置。
模式组件：模式组件依旧是业务无关的，这些组件通常是一些最佳实践和设计模式，旨在将一些重复的事情固化下来，提高开发的效率。antd-design-pro, iview-pro 就属于这一层。
比如一些通用的页面布局、表单、表格、导入导出。
它们往往是基础组件的封装，将重复的代码和流程固化/标准化下来，fat-table 就是一个典型的例子, 这个组件封装了我们表格页面的一些常用的操作：
开发者使用这些模式组件时只需要编写少量代码，关注业务和接口调用。
业务组件： 业务组件，顾名思义就是耦合了我们自己的业务。它只能适用于某些特定的领域。比如用户选择器、素材选择器等等。
页面：最终呈现到用户的界面，它的复用性最差。
很多组件都有他们的惯用方法，比如表单组件会使用 v-model 来进行绑定表单值、模态框我们会使用visible 或 show() 方法来控制显示。