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.