最近市面上流行很多很多 Vue.js 的组件库，那么众多组件库是如何搭建的？搭建组件库都需要注意哪些？组件库中都有哪些功能？下面就为大家一一揭晓。如果想略过下面罗里吧嗦的介绍，可以直接移步 component-template 看源码。
一些功能
- 官网搭建
- 源码打包配置
- 源码压缩配置
- 样式打包
- 利用 jest 单元测试的配置
- 持续化继承的配置
搭建组件库需要注意些什么
一个好的组件库，离不开完整的 开发系统 。一个好的组件库，离不开完整的 打包系统 。一个好的组件库离不开完善的代码 规范检查系统 。一个好的组件，离不开完整高覆盖的 单元测试 。一个好的组件库离不开很好的 自动化集成系统 。组件库有这么多功能，那么每一次搭建组件库，就要配置一次，显然不是明智之举。我们可以将骨干部分提炼出来，变成模板。利用 fecli 脚手架一键拉取。
开发系统
一个良好的开发系统应该不仅仅包括组件的开发系统，还更应该包括官网的开发系统。
早年间我开发过一个组件库 EM-FE 。现在再看这个库的显然不是很专业。官网和组件并不在里面，维护起来并不是很方便。新组建的建设，不仅编写组件，更要更新独立的官网的 api 及 demo 。如果要是放在一起，那么在编写组件的时候就顺便写好了 demo ，弄好的 api 。并不用移步组件库的官网仓库再维护一遍。
新的开发系统很简单，分为 water 和 site 两个目录。 water 目录则是组件的源码文件夹。 site 则是官网的源码文件夹。这样在开发组件的过程中，也可以编写 demo 了。
打包系统
一个良好的打包系统，不仅能打包组件库，还能打包官网。组件库不仅实现整体打包，还支持按需加载。官网打包直接继承组件库的东西即可。有关 api 的编写，我选择了 markdown 。直接读取 markdown 文件渲染到官网中。之所以选择 markdown 来编写 api 。考虑到其很流行，可以直接在 github 上编写，利于维护。
规范检查系统
一个良好的组件库还应该有配套的语法检测功能，好处就是代码统一。多人开发的代码，形如一人。
单元测试
良好的组件库必须要稳定，那么怎么做到稳定呢？开发人员在开发过程中的自测是很必要的。但是有些时候开发人员也不一定能面面俱到，这时候就应该引入单元测试了。有时候修改了一个紧急 bug ，上线之后却发现以前好好的功能缺不能用了，有了单元测试，则会避免这样的事情发生。
自动化集成系统
良好的组件库系统应该有一套完整的上线配置。这就需要自动化集成系统了。有了这套系统，我们可以检测依赖包的安全系数。我们可以不用每次手动的发版组件库，不用手动的发布官网，我们不用手动的单元测试。
组件库模板的好处
- 即拉即得，即得即用
- 一次配置，永远可用
- 结构明确，风格统一
如何使用组件库模板
请移步 从零开始搭建前端脚手架 。
源码
更全的配置，请移步 component-template 。
