自己搭建vue3组件库搭建的一些细节

背景

目前公司正在进行技术架构升级和改造。面临的是一个业务非常庞大的后台管理系统。页面数量上百个。文件数量多到数不胜数。

技术栈： 一部分采用的是jquery + typescript + gulp。另一部分采用了vue 或者 react。但是目前还是以jquery + ts 为主。

且前端总体规划的思路是进行为前端架构的改造。由于非常注重该项目的稳定性，我们无法一次性全盘推翻该项目，进行整体的技术栈升级。因为项目体量实在是太大了，一次全盘推翻重来，估计至少要1年。

于是我们决定了先对整个系统进行分割处理，分为一个个小的子应用。然后对子应用逐个进行技术栈升级。

后面打算用vue3 进行重写。

组件库构思过程

组件库的细节非常多。

• 有没有快捷的方式搭建一个组件库？

有，目前调研到了2个非常方便的脚手架，直接帮你生成一个组件库： 第一： varlet-cli 第二：vant-cli

两个脚手架都是用来生成一个组件库的。修修改改就可以实现自己的组件库了。

非常方便。但是因为集成度高，我们放弃了这个方案，我们自己写的一些脚本，然后大量的仿照element-plus来找各种解决方案。

• 组件库需要做到非常底层吗？ 我们是不是要做一个像element-plus一样的组件库呢？

答： 不是，根据现有业务状况和公司的整体目标。我们团队没有足够的人力去做这种没有实际盈利的项目。该组件库必须完全服务于我们的管理系统。因此，我们决定基于element-plus进行二次封装和改造。形成适用于公司业务的一个组件库。

• 组件库需要具备的重要功能？

第一：按需加载。

我认为一个组件库的很重要的能力就是要提供按需加载的能力。为了在后期被项目引用的时候，项目文件的大小能减小到极致，我们需要给组件库提供按需加载的能力。后期配合tree-shaking来优化项目的打包体积。

第二：单元测试 如果有可能，一定要提供单元测试，帮我们测试组件的可用性。但是这个不是必备的，如果项目时间紧，就不要搞这一步了，我们就放弃这一步了。打算后期根据情况来分析，是否需要搞单元测试。

• 组件库文档怎么实现？

像element-plus组件库一样，我们也需要一个官方文档来宣传或者使用我们的组件库。组件库的文档采用vitepress框架，我们只需要编写一部分md文件即可；其次，我们不仅仅是进行文字说明和展示，我们需要在文档上直接进行点击和交互，可以看到组件库的细节，就像element-plus一样。

组件库还有自己的主题色，vitepress提供了自带的主题定制方法，直接参考vitepress官网即可。

• 组件库要做哪些内容？

经过综合权衡，我们打算把组件库的内容分为以下4类：

第一：Origin组件，也就是原始组件，从element-plus直接获取的组件。

第二：Basic组件，对element-plus做了一些简单封装的组件，不涉及业务。

第三：Business组件，也就是业务组件。为什么我们要把业务组件放到组件库里，因为我们为前端改造过程中，每个子应用都需要用到一些重复的组件，这样方便我们进行统一修改和维护。再重申一遍，我们不是为了做一个通用的组件库，整个组件库的目标就是服务于我们的后台管理系统。

第四：Utils 公用函数，里面有大量的和vue并不相关的一些内容。我们把很多公用函数放到组件库了。有点像lodash一样。

• 组件库的打包如何实现？

我们可以借助vite的打包功能。打包需要注意哪些细节？

第一，我们需要注意打包的层级结构，每一种类型的组件都打包到一个文件夹。最后加暴露出来的时候，一定要用最短的路径去引用一个组件。

第二，每个组件最好有一个单独的打包文件，因为我们还需要按需加载。

• 如何实现组件的易用性？

入参尽可能简洁，使用起来不需要额外引用一些内容。

一定要采用ts开发，并提供.d.ts文件，利用编辑器的能力，让我们在使用组件的时候，可以有更多的提示。

• 组件库发布到哪里？

可以发布到npm官网，或者自己搭建私有的npm仓库，我们使用的是私有npm仓库。网上这种教程很多，可以自行查找。

后记

组件库是我们进行项目整体架构升级中的一部分，我们还有很多前端基建的事情要做。

目前组件库正在搭建过程中，主体框架已经搭建完成，预计月底就正式投入到使用。有正在做类似工作的同学，我们多多交流。