2024年,我经历了许多挑战和变化。这一年,我学到了很多东西,也成长了很多。
一、工作
1、财务超新星
年初,我借调到部门其他组,负责一个微前端项目的基础设施建设。主应用使用Vue3开发,需要整合多个Vue2的旧系统作为子应用,这给我带来了不少技术挑战。 在组件库建设方面,我基于element-ui封装了一套符合业务需求的组件库,统一了各个子应用的UI风格。同时建立了完整的组件文档,方便团队成员使用和维护。
为了提升应用性能,我对公共资源进行了优化处理。实现了公共依赖的共享加载机制,避免重复加载相同资源。通过webpack的externals和shared配置,使各个子应用能够复用主应用已加载的依赖。
在代码规范方面,我制定了统一的eslint规则集,包含代码格式、命名规范等。引入了commitlint规范git提交信息,并通过husky配置了pre-commit和commit-msg钩子进行自动检查。还完善了JSDoc注释规范,提升了代码的可维护性。
2、UI组件库
2024年,我主导开发了一套基于radix-vue的移动端UI组件库。该组件库采用tailwindcss作为样式解决方案,使用tailwind-variants实现组件变体,motion-one处理动画效果。组件功能与vant保持1:1对齐,同时完全符合部门design system规范。
在开发过程中,我特别注重以下几点:
- 基于radix-vue的无障碍支持,确保组件可访问性
- 使用tailwind-variants实现灵活的主题定制
- 通过motion-one实现流畅的过渡动画
- 完整的TypeScript类型支持
- 详尽的组件文档和示例
组件库上线后显著提升了团队开发效率,统一了移动端产品的交互体验。目前已在多个项目中得到应用,获得了良好的反馈。
开源
Motion Vue
2024年底,我开发了motion-vue动画库,这是一个基于motion引擎的Vue3动画解决方案。该库完全对标framer-motion的API设计,让Vue开发者也能享受到声明式动画的便利。
主要特性包括:
- Layout Animation - 自动计算并平滑过渡元素布局变化
- Motion Value - 响应式动画数值系统,支持spring/inertia等物理动画
- Gesture Animation - 完整的手势动画支持,包括拖拽、平移、缩放等
- 声明式API - 通过props控制动画,无需编写命令式代码
- 完整的TypeScript支持
这个项目获得了社区的广泛关注,包括Vue作者尤雨溪在X上推荐了这个项目。目前在GitHub上已获得1K+star。
结语
2024年,工作上得到的反馈不尽如人意,但好在开源项目获得了不错的反响,也算是对我工作的一种肯定。
希望2025年,工作上能够得到更多的认可,开源项目能够获得更多的star。