1 组件库介绍

软件组件：封装好的可复用程序的“零组件”

软件开发相当于软件组件进行一个个组合，即搭积木

前端UI组件：“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。

社区组件库非常多，本人最常使用的就是Element UI，当然市面上关于Vue的后台管理系统项目，很多都用到了Element UI。除此之外，还有Material UI，arco.design、Ant Design等等，适当使用组件库可以大大提高前端页面的开发速度，因为自己开发一个组件是非常耗时间的，除非需求非常独特。

组件库即一系列UI组件的合集，组件库需要保证一致性、效率与协同

2 组件库的使用

快速上手

以arco-design为例，引入组件react>=16.8和react-dom>=16.8

下载命令：npm i @arco-design/web-react

引入组件库分为按需加载和全部加载，显然，按需加载是比较省空间的方法，不过不同组件库按需加载还是全部加载是需要看情况的，大部分以前者为主

在arco-design中，按需加载需要加载插件babel-plugin-import，然后通过修改babel配置，引入插件

除此之外，还能通过cdn导入，在学习组件库的情况下可以试试，不过个人看法是本地还是直接安装更好，cdn的用法主要还是在线平台，比如codepen

主题定制

可以通过CSS进行样式覆盖

或者修改组件库预先设计好的Less变量（部分组件库支持）

业务常见问题

可以通过官方组件库仓库查看源码，查看官方文档和issue以及用户群得知

如果是比较新的组件库，可能会踩很多坑，从而浪费时间，新手不建议

3 自定义组件

业务组件库搭建

搭建通用业务组件库需要保障规范性，稳定性，这样才能提高业务开发效率

搭建业务组件库就像搭房子一样，需要做好架构设计、技术方案、对外文档

架构分为单包架构和多包架构，具体需要根据实际业务场景选择合适的架构

什么是好的组件

好的组件应该是高内聚、低耦合，同时具有通用性、易扩展