Skip to content

构建组件库

理解 Vue 编译与运行机制之后,下一步可以看组件库工程:

怎样把这些认知沉淀成可以长期维护、可以发布、可以测试的组件库工程?

这里不只讨论“一个组件怎么写”,还会讨论“一个组件库怎样形成交付链路”。

组件库不是只有组件代码

一个可用的组件库,通常至少要同时考虑这些问题:

  • 组件如何设计和抽象
  • 如何组织源码与导出入口
  • 如何构建产物与类型声明
  • 如何验证交互、样式和回归行为
  • 如何给使用者提供文档与示例
  • 如何发布到 npm 并持续演进

所以这一章按工程链路组织,而不是几篇孤立文章。

阅读顺序

主线:从 0 到 1 提炼组件

  1. 组件的编写
  2. 组件的构建
  3. 组件的测试
  4. 组件的发布
  5. 组件的使用

支线:观察成熟组件库

延伸:思考下一代组件库方向

谁适合读

  • 正在从业务组件走向可复用组件库的人
  • 需要补齐打包、测试、发布链路的人
  • 想观察成熟组件库工程组织方式的人

建议带着这些问题阅读

  • “组件可复用”与“组件可发布”之间差了哪些工程环节?
  • 构建工具、测试工具、文档工具在组件库中如何协同?
  • 一个组件库应该优先保证什么:API 稳定、样式一致、类型完整,还是构建灵活?

如果你只是想提炼几个内部组件,那么前两篇通常已经足够;如果你想做一个长期维护、多人协作的库,就建议按整条主线走完。

下一步

这里想建立一种工程意识:

  • 组件库不是若干组件文件的堆叠
  • 它是一条从设计、实现、构建、验证到分发的完整链路

开始这样看组件库之后,很多“为什么这一步也要做”就会自然清楚。

接着读

如果你已经读完主线,可以回头结合 element-plus(Vue 3)构建分析下个时代的组件库 做一次对照阅读。

Released under the CC BY-NC-SA 4.0 License.