组件库ui（谈一谈前端私有组件库的必要性（组件库系列一））

时间2025-06-14 01:05:04分类IT科技浏览4315

导读：前言工作多年遇到各种各样的项目，往往在固定的岗位或者说固定的业务部门，同类型的项目出现的频率极高。很多同学对于组件库这个概念更多的使用场景，可能是拿到开源的一些组件库开箱即用。如PC端的ElementUI、Ant-design、移动端的vant之类的。这些开源的组件库能够很大程度的满足...

前言

工作多年遇到各种各样的项目，往往在固定的岗位或者说固定的业务部门，同类型的项目出现的频率极高。很多同学对于组件库这个概念更多的使用场景，可能是拿到开源的一些组件库开箱即用。如PC端的ElementUI 、Ant-design 、移动端的vant之类的。这些开源的组件库能够很大程度的满足页面开发的需求，组件库没有兼顾的到的组件可能通过搜索引擎查一下对应的插件，引入进来使用即可。今天我是想和大家聊一聊建立自己私有组件库的一个必要性。

说明

很多人听到“私有组件库“ ，脑海里首先浮现出重复造轮子 、时间成本大 、开发完后问题多 、流程复杂等系列问题。我完全认同这种说法，重复造轮子价值十分有限。但是我认为私有组件库并不是非得从0开始的。我们可以基于一个组件去进行对应的二次开发，保持原组件库内容不变的前提下，进行组件库的二次封装，并且添入一些组件库未包含的内容。如：

公共基础样式（space 、border 、position 、flex布局等）公共通用函数（Array处理类、Object处理类、时间处理类等）公共指令（防抖、错误图片、复制、水印等指令）可以对原组件库进行二次封装，去除内容一些重复性操作，扩展原组件库内容项目中封装的一些不含业务性的组件也可以抽离到组件库

私有组件库的好处

对组件的原理有更深的理解

写组件库和业务中写组件有着极大的不同。

业务中组件的开发：规范性弱、适应性低、与业务强耦合、不同的项目可复用性差。且相对来说技术含量较低，

举例：面试一些同学的时候，我会问vue开发的时候有写过组件吗？大部分人都会回答有的。但是呢同样有着很大一部分的同学，对于$

和

attrs和

attrs和listeners这些东西没有用过，甚至没有听说过。这些点在写基础组件或者业务组件的时候是避不过去的点。

组件库开发能够遇到项目中遇不到的技术难点。独立完成一个组件库后对项目代码的编写会更加的驾轻就熟。

提升开发效率

组件库的开发，核心的点是用来提升工作效率。跟设计部门将设计规范融入到前端样式规范和组件中。将常用的组件库、公共内容等通过一起打包。将原有需要东拼西凑的零散点集结一起。能够减少工作的重复代码率。自己写的组件库通过文档的支撑，可以辐射到整个前端团队。加快团体的工作效率以及代码风格的一致性。并且通过不同的项目洗礼，让私有组件库更佳完善。

更好的找工作

虽然有没有私有组件库并不能成为这个前端技术能力的的评判标准，但是面试的时候不管是对HR还是面试官，能够介绍自己所做的组件库。这在面试中是能够有着极大的加分项的。

PS: 后续更新我会从0开始讲一下我搭建一个私有组件库、封装各个组件以及公共内容的全部过程。欢迎大家指点、互相探讨

hc-basic已开源

组件库代码地址：

https://gitee.com/yangxiongasin/hc-basic

组件库文档代码地址：

https://gitee.com/yangxiongasin/hc-docs

对组件库开发有兴趣的可以进QQ群： 617330944大家一起讨论交流