2024 年中期因为工作变动，熟悉新环境等种种原因，我的技术写作之路暂时搁置了一段时间。现在终于能重新拾起这支笔，和大家分享下最近的一些技术探索。
缘起
在新的工作环境中，我接触到一个有趣的挑战：如何构建一个视觉体验全面提升的组件库。这本来是个普通的需求，但因为项目深度依赖 Vue2，让这个任务变得颇具挑战性。
我们都知道，Vue2 已经正式宣布停止维护，但现实是，还有相当多的技术资产都构建在 Vue2 之上。在产品迭代压力和技术改造成本的权衡下，继续在 Vue2 基础上改良优化往往是更务实的选择。
技术选型的困境
我查看了社区中流行的组件库方案：
- Ant Design Vue
- Element UI
- Element Plus 等等...但都不能完全满足我们的需求。
虽然我们使用的是相对较新的 Vue 2.7.x 版本，但相比 Vue3 仍然存在诸多限制：
- 对 TypeScript 的支持不够完善，很多类型定义需要额外的配置和处理
- 响应式系统基于 Object.defineProperty，在性能和功能上都不如 Vue3 的 Proxy 实现
- 组件逻辑复用方面，缺乏 Composition API 的优雅表达（虽然 2.7 提供了部分支持）
- 缺少 Teleport、Suspense 等现代特性的原生支持
更具挑战性的是，我们还需要考虑未来向 Vue3 迁移的平滑升级路径。这意味着在开发 preset-vue2 时，就需要在架构设计上预留升级空间，尽可能复用可以共享的逻辑和实现。
柳暗花明
恰好我之前有过使用 dumi 的经验，对它的能力相当了解。当我得知 dumi 团队在 2024 年下半年开源了 preset-vue（Vue3 版本）时，一个想法在我脑海中萌生：何不尝试开发一个 Vue2 版本的 preset 呢？这样不仅能解决当前的文档需求，未来升级时还可以参考 preset-vue 的实现。
开发历程
这个想法说起来简单，但对我来说却充满挑战。虽然平时主要使用 React 进行开发，但这次要深入理解 Vue 的内部机制，特别是 Vue2 的一些特殊实现。好在有 AI 工具的帮助，在摸索了半个月后，已经完成了大部分核心功能：
- SFC 组件的支持
- TSX 组件的支持
- 内联 demo 展示
- 外联 demo 支持
目前正在进行 API Table 的实现，这个过程中有很多有趣的发现和思考。同时，我也在探索如何设计一个灵活的架构，为未来可能的 Vue3 升级预留空间。
写作计划
接下来，我打算开两个系列来分享这段经历：
-
第一个系列关注 dumi-preset-vue2 的实现细节，包括如何处理 Vue2 的特性限制，以及为未来升级做好准备。通过这个系列，我们将：
- 深入理解 Vue2 和 Vue3 在编译流程上的差异
- 探索相同 API 在不同版本下的实现逻辑差异（比如 v-model 在 Vue2/3 中的区别）
- 通过实践理解为什么 Vue3 要做这些改进，以及如何更好地规划技术升级路径
- 学习如何在工具层面优雅处理不同版本框架的特性差异
-
第二个系列会深入 dumi 的主题定制机制，通过实战来学习 dumi 和 umi 背后的插件机制，以及它们的源码架构。这个系列将带来：
- 理解现代文档工具的架构设计思路
- 学习 dumi 是如何实现技术栈无关的插件体系
- 探索如何设计一个灵活的架构以支持新型视图层库的接入
- 思考文档工具和组件库开发工具的未来发展方向
这两个系列不仅仅是技术实现的分享，更是一次深入理解现代前端框架演进和工具链建设的机会。如果你也在思考组件库文档建设、框架升级或工具链优化等问题，相信这些内容会给你带来一些启发。
这是我重新开始写作的第一篇，如果你也对这些主题感兴趣，欢迎一起交流讨论。