构建组件库
理解 Vue 编译与运行机制之后,下一步可以看组件库工程:
怎样把这些认知沉淀成可以长期维护、可以发布、可以测试的组件库工程?
这里不只讨论“一个组件怎么写”,还会讨论“一个组件库怎样形成交付链路”。
组件库不是只有组件代码
一个可用的组件库,通常至少要同时考虑这些问题:
- 组件如何设计和抽象
- 如何组织源码与导出入口
- 如何构建产物与类型声明
- 如何验证交互、样式和回归行为
- 如何给使用者提供文档与示例
- 如何发布到 npm 并持续演进
所以这一章按工程链路组织,而不是几篇孤立文章。
阅读顺序
主线:从 0 到 1 提炼组件
支线:观察成熟组件库
延伸:思考下一代组件库方向
谁适合读
- 正在从业务组件走向可复用组件库的人
- 需要补齐打包、测试、发布链路的人
- 想观察成熟组件库工程组织方式的人
建议带着这些问题阅读
- “组件可复用”与“组件可发布”之间差了哪些工程环节?
- 构建工具、测试工具、文档工具在组件库中如何协同?
- 一个组件库应该优先保证什么:API 稳定、样式一致、类型完整,还是构建灵活?
如果你只是想提炼几个内部组件,那么前两篇通常已经足够;如果你想做一个长期维护、多人协作的库,就建议按整条主线走完。
下一步
这里想建立一种工程意识:
- 组件库不是若干组件文件的堆叠
- 它是一条从设计、实现、构建、验证到分发的完整链路
开始这样看组件库之后,很多“为什么这一步也要做”就会自然清楚。
接着读
如果你已经读完主线,可以回头结合 element-plus(Vue 3)构建分析 和 下个时代的组件库 做一次对照阅读。