从零搭建 Vue.js 组件库模板

时间:2021-1-8 作者:admin

最近市面上流行很多很多 Vue.js 的组件库,那么众多组件库是如何搭建的?搭建组件库都需要注意哪些?组件库中都有哪些功能?下面就为大家一一揭晓。如果想略过下面罗里吧嗦的介绍,可以直接移步 component-template 看源码。

一些功能

  • 官网搭建
  • 源码打包配置
  • 源码压缩配置
  • 样式打包
  • 利用 jest 单元测试的配置
  • 持续化继承的配置

搭建组件库需要注意些什么

一个好的组件库,离不开完整的 开发系统 。一个好的组件库,离不开完整的 打包系统 。一个好的组件库离不开完善的代码 规范检查系统 。一个好的组件,离不开完整高覆盖的 单元测试 。一个好的组件库离不开很好的 自动化集成系统 。组件库有这么多功能,那么每一次搭建组件库,就要配置一次,显然不是明智之举。我们可以将骨干部分提炼出来,变成模板。利用 fecli 脚手架一键拉取。

开发系统

一个良好的开发系统应该不仅仅包括组件的开发系统,还更应该包括官网的开发系统。

早年间我开发过一个组件库 EM-FE 。现在再看这个库的显然不是很专业。官网和组件并不在里面,维护起来并不是很方便。新组建的建设,不仅编写组件,更要更新独立的官网的 api 及 demo 。如果要是放在一起,那么在编写组件的时候就顺便写好了 demo ,弄好的 api 。并不用移步组件库的官网仓库再维护一遍。

新的开发系统很简单,分为 watersite 两个目录。 water 目录则是组件的源码文件夹。 site 则是官网的源码文件夹。这样在开发组件的过程中,也可以编写 demo 了。

打包系统

一个良好的打包系统,不仅能打包组件库,还能打包官网。组件库不仅实现整体打包,还支持按需加载。官网打包直接继承组件库的东西即可。有关 api 的编写,我选择了 markdown 。直接读取 markdown 文件渲染到官网中。之所以选择 markdown 来编写 api 。考虑到其很流行,可以直接在 github 上编写,利于维护。

规范检查系统

一个良好的组件库还应该有配套的语法检测功能,好处就是代码统一。多人开发的代码,形如一人。

单元测试

良好的组件库必须要稳定,那么怎么做到稳定呢?开发人员在开发过程中的自测是很必要的。但是有些时候开发人员也不一定能面面俱到,这时候就应该引入单元测试了。有时候修改了一个紧急 bug ,上线之后却发现以前好好的功能缺不能用了,有了单元测试,则会避免这样的事情发生。

自动化集成系统

良好的组件库系统应该有一套完整的上线配置。这就需要自动化集成系统了。有了这套系统,我们可以检测依赖包的安全系数。我们可以不用每次手动的发版组件库,不用手动的发布官网,我们不用手动的单元测试。

组件库模板的好处

  • 即拉即得,即得即用
  • 一次配置,永远可用
  • 结构明确,风格统一

如何使用组件库模板

请移步 从零开始搭建前端脚手架

源码

更全的配置,请移步 component-template

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。