一、什么是组件？

组件可以理解为我们在玩搭积木的时候的一根根积木条。这些积木条可以被用在任何的积木结构中，并且还可以反复使用。也就是说，组件是封装好的可复用的“程序积木”。

对于前端领域来说，最常见的就是UI组件啦。相信在写项目的时候，手动调样式都是让不少人相当头疼的事情，即便现在有了许多工程化CSS方法加持，写样式依旧是让人非常头疼的事情。而UI组件可以提供给我们一些现场的写好了样式的组件，同时还拥有丰富的交互功能。通过组件暴露的接口，我们还可以对组件进行方便的自定义。

而所谓的组件库就是一系列组件的集合啦。常用的比如Ant Design、Element、Arco Design等等都是一些非常优秀的组件库，相信大家自己写项目的时候也应该或多或少都使用或者听过这些组件库。

二、组件库使用

快速上手

组件库如何使用这些在各个组件库的官方文档当中都是有非常清楚的说明的，这里不再赘述。需要注意的是，一般来说一个完整的组件库的代码量都是非常庞大的，如果直接全局引入组件库可能会导致项目打包后的体积增大。因此可以考虑按需引入组件的方式。

主题定制

以Arco Design为例子。通过在在webpack当中进行配置，我们可以自定义一些主题功能

// webpack.config.js
module.exports = {
  rules: [{
    test: /.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
+     options: {
+       modifyVars: {  // 在less-loader@6 modifyVars 配置被移到 lessOptions 中
+         'arcoblue-6': '#f85959',
+       },
+       javascriptEnabled: true
+     },
    }],
    ...
  }],
  ...
}

组件定制

除了主题，Arco Design还支持对于单个组件进行定制。

组件可定制对于组件库来说是很重要的，毕竟，你不能保证在你项目里面使用的组件的功能能够完全契合别人的项目。因此组件在设计的时候就需要考虑能否自定义，以及可自定义的功能范围。

三、自定义组件

除了使用开源的组件库，也可以考虑自己开发一套组件库用于满足公司内部的业务需求。设计思路可以参考这些成熟的开源组件库。

首先从业务出发，看看哪些组件是公司业务中经常需要使用的，从而将这些组件单独抽离出来用于搭建组件库。其次就是选择组件库的架构和方案，比如采用单包还是多包架构？样式方案如何选择？构建工具如何选择等等。

组件库基本搭建完成时，还需要一份良好的说明文档以及版本更新日志。毕竟组件库最终是要服务于开发者的，让人能够快速上手是必不可少的。

好组件的标准

一个好的组件库应该包含以下条件

语义化命名。见名知义。
包名和组件名一致。
单独维护类型文件。

四、总结

组件库能够帮助开发者快速进行项目结构搭建，可以直接使用一些优秀的开源组件库。或者从自身业务出发，开发自定义组件库。最近学了很多工程化相关的东西，后面也试着自己但一个组件库试试吧。

组件库使用与自定义组件 | 青训营笔记