有人云，不好用就自己写一个；
前言
对于前端开发者来说，多多少少有自己搭建一个组件库的写法，有的人为了方便，有的人喜欢折腾，而我，则属于前者
接下来我会讲解以下知识点，便于后续实战操作（如果你已熟知下列概念，请移步到实战篇）：
- Monorepo 项目搭建
- vite3 库模式使用
- gulp 自动化文件处理
- vuepress2 文档搭建
- npm 组织与发布
Monorepo 项目
mono单个、repo储存库。是一种开发策略，将许多项目代码存储到一个储存库项目中，统一管理；详情查看 wiki Monorepo
简单来说，我们建立了一个大项目，里面有很多子项目，并且实现大项目安装的依赖，子项目也能直接访问，且不需要再次安装；并且我们的子项目间可以互相在打包后安装使用，这样避免了上传到npm的操作
优势
- 代码复用性较强。方便将公共部分抽离并引用
- 简化的依赖关系管理。子项目可同时依赖其主项目，无需多次安装配置
- 原子提交。方便代码提交
- 方便大规模代码重构。可以同时并便利的对多个项目进行修改
- 跨团队写作。
劣势
- 版本信息丢失。无法在子项目中使用不同的依赖版本
- 缺乏单一项目的权限访问控制
- 占用较大，且需要合理的管理
为什么组件库选择这种模式
因为一个完整的组件库，包含了测试项目、组件库项目、组件库自定义依赖项目、组件库文档等，而他们互相又是一种互相引用的结构；终上所述，Monorepo正好满足以上需求，而事实上我们常见的组件库，都采用了此模式，如vant、element
vite3 库模式
对于我们新生代高端农民工（简称码农）来说，多多少少都用过或者知道vite（其实不知道也无所谓，你大可把他当做速度更快、配置不同的webpack），而我们在实际开发中都是用来开发网站这种项目；而库模式，为了方便我们开发个人库（组件库、函数库等等），具体配置见 vite 库模式
gulp 自动化文件处理
对于vite来说，他在打包时对less、ts这种常见的预处理语言处理是单一的，所以需要我们自己进行处理；而且目前比较主流的就是我们大名鼎鼎的 gulp.js（轻量且简洁）
vuepress2 文档
当你准备好了上述工作，那你就该开始准备组件库的搭建了；好消息是 vuepress2，一个基于vue+md的文档库，能完美解决你的需求
npm 组织与发布
一切准备就绪，打包！然后就是发布~
这里简单叙述一下组织的概念。简单来说，就理解为包的父类；假设我们发布了一个组件库叫 srui ，然后 srui 依赖于我们的自己实现的一个函数库 utils（为了复用性从组件库中抽离），此时我们的这个函数库按照规范就应该被命名为 @srui/utils；而 @srui 就是一个组织，srui就是我们的组织名称；如何建立组织，请移步 npm-Organization