「Versakit UI」前端娱乐圈?又来一个组件库?我们做了组件库才明白这是有意义的!

3,559 阅读5分钟

Hi!大家好,这里是和朋友们一起开发组件库的JustHappy。我们的Versakit UI从立项至今已走过数月,今天想和大家聊聊我们的开发感悟与技术实践。👋👋

image.png

📚 官方文档versakit.github.io/Versakit

💻 代码仓库github.com/lenran659/V…


为什么要做「又一个组件库」?

前端领域常被戏称为「娱乐圈」——每天都有新框架、新工具涌现。我们曾困惑:这真的是在推动技术进步吗?直到亲身开发组件库后,我们才理解:每一次技术探索都是对工程本质的回归

阶段成果速览 🏹

  • 30+  基础组件开发完成
  • CLI 工具链建设中
  • 富文本编辑器+Markdown渲染附属项目启动
  • 每周 npm 下载量突破 100+

一、架构设计三亮点 🚀

1. 渐进式主题系统

  • 暗黑模式prefers-color-scheme + CSS Variables 双引擎驱动
  • 色彩阶梯colors.ts 中 0-10 色阶的数学化建模
  • 智能适配:按钮文字颜色自动对比度校验(WCAG 2.1 标准)

2. 类型安全体系

  • 精准的类型提示
    // 按钮尺寸的联合类型约束
    type ButtonSize = 'sm' | 'md' | 'lg' | { custom: string }
    
  • Props 泛型约束:类型守卫保障合法字段
  • 事件溯源:emit 类型系统实现事件流追踪

3. 工程化实践

  • Monorepo 架构:模块边界清晰化
  • 原子化 CSS:Unocss 实现样式零冗余
  • 自动化流水线:脚本化构建流程提升 3 倍效率

二、核心竞争优势

能力维度Versakit 方案竞品常见方案
主题定制CSS 变量 + 运行时动态注入SASS 变量/全局 CSS 覆盖
类型系统深度 TypeScript 集成基础 PropTypes 校验
包体积按需加载 + Tree-shaking全量引入
组件通信Provide/Inject 上下文体系独立 Props 传递
可测试性Vitest + Testing Library 整合Jest 单测为主

三、潜在亮点挖掘

1. 交互状态机设计

// 检测到按钮的状态流转逻辑
const stateMachine = {
  initial: 'idle',
  states: {
    idle: { on: { HOVER: 'hover' } },
    hover: { on: { PRESS: 'active' } },
    active: { on: { RELEASE: 'idle' } }
  }
}

2. 可访问性增强

  • 检测到 ARIA 属性的部分实现
  • 可扩展方向:
    <button 
      role="switch"
      :aria-checked="isChecked"
      :aria-disabled="disabled"
    >
    

3. 性能优化策略

  • 静态 DOM 分析v-once 在卡片组件中的应用
  • 异步插槽渲染:检测到 $slots 的动态加载判断
  • 样式隔离:where() 选择器的使用减少特异性

以及最重要的......

我们的团队!

image.png

也许我们的组件库不会被很多人所使用,不会很出名,不会有什么功利上的作用,但是,通过做这件事情,我们真真切切体会到了什么是一个合格的前端工程师

开发组件库教会我们的事

打破「增删改查」困局

作为在校学生团队,我们曾困于业务开发的表层逻辑。组件库开发让我们深入理解:

1. 前端工程化闭环 🛠️

从脚手架搭建到 CI/CD 流水线,完整走通「开发-构建-测试-发布」全链路。实践出真知:

2. 软件工程思维升级 🪜

  • 设计模式:工厂模式创建组件实例
  • 架构设计:插件系统实现横向扩展
  • 代码规范:ESLint + Prettier 保障代码一致性

3. 基础能力重构 💡

  • CSS 层叠奥秘:where() 选择器实现样式隔离
  • 状态管理:基于 Proxy 的轻量级响应式系统
  • 渲染优化:虚拟滚动性能提升 5 倍+

4. 团队协作范式 🤝

  • Git Flow 工作流
  • RFC 提案机制
  • 代码 Review 文化

我们接下来要做什么?

无头组件 + 主题系统的化学效应

传统组件库的样式覆盖如同「开盲盒」,而 PrimeVue 的 Unstyled Mode 给出新思路:

经常使用或关注Nuxt的朋友应该或多或少有接触过PrimeVue这个库,在我们团队看来这是Vue生态中无头组件(Headless Components)  和 主题系统 融合的很好的解决方案,所以受到他们的启发,我们也决定接下来在我们的组件库中集成类似的解决方案

image.png

这么做有什么好处呢?

对于我来说,比如我们使用Element的组件的时候,我们希望对其样式作重写,这就要使用样式穿透等方式对Element原有的样式做覆盖,这导致我们要在浏览器Dev tool中去定位我们需要修改的元素位置,要知道在代码编辑器中我们往往只能看到其暴露出来的部分标签,我们是无法直接定位到元素直接修改的,而PrimeVue 的 Unstyled Mode 结合了无头组件的灵活性和主题系统的可扩展性,为开发者提供了极大的自由度,同时保留了 PrimeVue 的强大功能,这是让我们感到兴奋的!🚀🚀

image.png

目前我们已经在Demo中参考PrimeVue初步实现了该功能!期待我们接下来的努力吧!

开源精神的本质是传承,比起“抄袭”更多的是“学习”与“代码朝圣”

是的,我们大量借鉴了优秀开源项目的设计。但正如 Linux 之父 Linus 所说:「好的程序员懂得借鉴,伟大的程序员懂得改进」。在 Versakit 的代码中,你会看到很多参考Element、Lay UI、PrimeVue的实现方案的代码,但是这并不可耻!作为开源界和前端圈的“后生仔”,有太多的知识需要我们去学习,但是我们享受这个过程!

Versakit 团队,致敬每一位开源先驱者!  🚀

哦对了,如果你也想加入我们有关开发一个组件库的讨论.....

欢迎加入我们的交流群🎉🎉

image.png