Eson Wong's Blog

生活随想、学习笔记、读书总结、创作记录

0%

Vue 3.0 的 UI 库对比

我的盆友小黎想和我一起做一个 Vue 3。0 的 UI 库,于是花了些时间对比了一下现有的 Vue 3.0 的 UI 库。

主要特征

UI 库 适用场景 语言 模版 Style 打包
Ant Design Vue 3.0 中后台 Typescript JSX LESS Webpack
Element Plus 中后台 Typescript Vue Template SCSS Rollup
Vuetify 3.0 通用 Typescript JSX SASS Rollup
Naive UI 中后台 Typescript JSX Typescript Style Vite

主要目录结构

  • Ant Design Vue 3.0

    1
    2
    3
    4
    5
    6
    - components
    - component
    - demo
    - style
    - index.tsx
    - index.zh-CN.md
  • Element Plus

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    - packages
    - components # 组件
    - component
    - src
    - component.ts
    - component.vue
    - style
    - css.ts
    - index.ts
    - theme-chalk # 样式
    - directives
    - locale
    - mixins
    - locale
    - utils
    - element-okus
    - docs # 文档
    - play # 开发环境
  • Vuetify 3.0

    目录过于复杂,层级太深,不建议参考

    1
    2
    3
    4
    5
    - packages
    - Vuetify
    - src
    - components
    - component
  • Naive UI

    1
    2
    3
    4
    5
    6
    7
    8
    9
    - demo
    - design-notes
    - src
    - component
    - demos
    - src
    - Component.tsx
    - styles
    - themes

For 小黎

我在整理查找这些资料的的时看到 Naive UI 作者创作这个组件库的经历,才回想起自己学到的对于完成一个目标的方法:把目标细分,能够获得连绵不断的反馈。我觉得写一个组件库这个目标对于我们来说太大了,在它达到一个可用的状态之前,我们不能得到足够的反馈,来让我们保持热心维持下去。

我们开始的目标可以小一些,给 Naive UI 提 PR,学习制作 UI 库的经验。在这个过程当中确定我们的 UI 库的适用场景和设计原则。

请我喝杯咖啡吧!

欢迎关注我的其它发布渠道