原副标题：从头开始构筑两个归属于你他们的模块库！
↓推荐关注↓
以后发过一则构筑模块库该文 采用 Vite 和 Type 从零打造出两个归属于他们的 Vue3 模块库 三篇该文能结合一起学习
模块在前端合作开发中越来越重要了，合作开发人员更行业龙头、著眼于模块微观的合作开发，接着像捞虾一样完成应用机能。模块库能统一管理模块，输入文件格式，能提升模块F83E43Se性、防止多次重复造车轮。赶紧构筑他们的模块库吧，这瓜保甜！
市场需求背景
为什么要构筑组件库？
虽然业内已经有许多成形杰出的ui库能供他们采用，也为他们解决了许多难题。但是基础的小东西常常不能满足用户所有销售业务情景，更多这时候他们须要 扩充机能来满足用户销售业务的市场需求，比方说 table 须要自订列这种的～相信这也是许多爸爸妈妈合作开发这时候的情景。
跨工程项目F83E43Se。许多这时候为了方便快捷，只是如前所述当前工程项目对模块进行伊瓦诺PCB（再说我是这种干的呵呵），接着做其它工程项目碰到同样情景时，或者copy（时常忘掉以后PCB在别的工程项目里了🌚）、或者重新干两个…常常缺乏两个统筹规划的地方，F83E43Se很不方便快捷。
模块采用文件格式。文件格式工业生产对于第一线合作开发来说可能相对比较缺乏，因为大家都无暇顾及撸销售业务，文件格式这种爱马仕省钱一点儿是一点儿。这种导致两个难题就是他们PCB的模块别人不会用、不晓得在哪里用，甚至不晓得有这么个小东西。
跨项目组资源共享发展。多半B端系统都是以 element 、 antd 等ui架构为主，如前所述各种销售业务情景，基本单厢有他们项目组的伊瓦诺PCB。其实类似的功能扩充肯定会有的是，如果有模块库把模块都集中起来，就能减少许多多次重复造车轮的劳力了！
本栏以后就时常有这种的关键点，在某一工程项目里伊瓦诺PCB了 el-select ，实现 filterable 的时搜寻快捷方式移到下拉列表中，防止多选时数个 tag 抬升了搜寻框的空间。当时是写在两个工程项目里，接着其它工程项目也碰到了这种的市场需求…我在十数个工程项目里面找寻、自述，寻回当年PCB的模块，人都麻了……
刚好最近在搞 云产品，须要提供给各中后台统一的样式、布局规范以接入，还须要 统一扩充基础模块的能力。于是模块库的市场需求的就这么出来了！基本想做成的就是对 element-ui/plus 、 antd 一些模块进行伊瓦诺PCB、扩充，并集成到模块库中，本栏当仁不让把市场需求从大佬手上抢过来做。
目前初步构筑起来了两个简易的模块库了，可对 element-plus 、 element-ui 的模块进行合作开发调试，且目前已经实现几个组件的扩充了～当然，第一版还是有许多工作没做完、做好，不过没关系，毕竟不能一下吃成两个胖子。
本文会从模块库的 工程架构、 文件格式、 模块合作开发环境准备、 打包、发布进行分享，模块合作开发环境主要是 element-ui/plus 的🤣，因为本期市场需求只要满足用户 vue2 、 vue3 的中台，所以 antd 的还没有投入。与其说分享，其实更是做两个记录沉淀一下，也是回顾总结～事不宜迟！开始进入主题吧，从0-1构筑两个模块库！
一、工程项目架构
第一次搞模块库，仿佛走进两个新的空白领域了。作为两个没经验的小白，当然是得抄作业啦，不不不，应该是“借鉴”😜。这这时候搞个开源的工程项目来参照参照还是挺香的，于是本栏就去“学习了” element-plus工程项目[1] 的架构、代码组织方式，再结合他们的市场需求情景就开始干了。
1. Monorepo
整个工程的代码组织采用 Monorepo 的组织方式，采用工具 pnpm workspace 来实现。所以全部工程项目都是放在两个仓库里的，包括文件格式、模块。
工程具体分为以下几块，以 文件格式和 模块库为两大类进行分块：
文件格式工程（docs）
安装指引
模块采用文件格式（ elm 、 elp 、 antd ）
组件合作开发文件格式
模块库（packages）
element-plus
element-ui
ant-design
voice-components
其中 voice-components 本栏是打算用来做 adapt层用的，因为文件格式工具用了 VitePress （后面会讲），它只能支持 vue3 的模块，所以 vue2 、 react 的模块须要做一层适配，这一块是预留的，暂时能不关注。
第一版比较简单，后续如果沉淀出一些工具、打包脚本等，也会再扩充几个工程项目放进去 workspace 里。所以目前就先这种吧，用着先～
2. 文件格式工程项目结构
抄作业抄作业，这部分跟 element-plus 基本是一致的。
index.md 。！！顾名思义，文件格式首页～
.vitepress 目录：文件格式站点工具配置相关，这个后面再展开～
zh-CN目录：文件格式md文件
components： 模块采用文件格式.md 。模块的 采用demo及 案例代码，相关配置说明
guide： 模块库指引文件格式.md 。包括模块的安装指南、合作开发指南
public目录：相关静态资源目录。 css 、 image 等
build目录：放点他们实现的构建脚本、vite插件啥的
3. 模块库结构
这部分跟 element-plus 也是基本一致的，具体大家能参照他们的实现，这里就记录个大概，粗略带过吧。
每两个ui架构的结构都一样，以其中两个为例记录：
模块工程项目入口—— 根index 。导出当前工程项目须要导出的所有模块（可按需引入）。并导出全局安装方法。（ Vue.use(VcComponents) ）可全局注册
export* from./components
exportdefault{
install
}
components：
入口文件：index。导出所有模块。
export* from…
export* from…
export* from…
存放全部模块，以模块名作为文件夹名。
模块文件夹（以button为例）：
入口文件：index。导出当前模块，并包装 install 方法（主要用于 Vue.use 调用时进行全局注册）。
模块文件。实现模块扩充的伊瓦诺PCB。（这里建议扩充模块时保留模块的原来用法，这种能降低采用这时候的学习成本）
二、模块库工具
这里不会面面俱到，只记录一些用到的核心工具以及核心的用法～就算不是特别细粒度，相信大家要他们动手搞的这时候也难不倒你们的！！本栏这么菜都一样搞，你们肯定都行！
1. 文件格式站点工具—— VitePress
对于模块库来说，文件格式能说是最关键的一环了，没有文件格式的模块库不是真的模块库～这里本栏用了几分钟去调研（根本就没怎么调研），最终决定采用VitePress[2] 作为文件格式站点工具，目前用的版本是 1.0.0-alpha.4 。（呵呵哈大家不要害怕alpha版，用着没啥毛病）
采用下来 基本配置用法在 官方文件格式[3] 中都能找到，已经满足用户当前的采用情景了～大家也要采用的话，花点时间去搓一搓就好，整个文件格式站点构筑不算难，毕竟只要能跑起来就能慢慢调整慢慢搞。
核心配置（都放在 .vitepress 目录下）：
配置文件： .vitepress 根目录的 config 文件。其实没有特别多的配置，主要就是导航栏和 菜单栏而已。
exportdefaultdefineConfig({
title: voice-ui,
deion: ,
base,
head: [
[
link,
{
rel: icon,
href: /images/favicon.ico
}
]
],
themeConfig: {
logo: /images/favicon.ico,
nav, // 配置导航栏
sidebar,// 配置侧边菜单栏
footer // 配置页脚
}
})
nav 配置导航栏配置（ 文件格式链接[4] ）
exportdefault[
{ text: 指南, link: , activeMatch: },
{ text: element-plus, link: , activeMatch: },
{ text: element-ui, link: , activeMatch: },
{ text: ant-design, link: ,activeMatch: }
]
sidebar 配置侧边菜单栏（ 文件格式链接[5] ）。具体配置太多就不全贴出来了，这里的配置在文件格式中都能找到。如下这种配置就是两个 nav 路由对应两个 sidebar 菜单。
exportdefault{
/zh-CN/guide/: [
{
text: 安装,
items: [
{ text: element-plus, link: },
…
]
},
{
text: 合作开发人员指南,
items: …
}
]
}
大概的效果如下，不同nav对应各自的侧边栏菜单：
/theme/index 中自订义主题
