这篇文章是一遍想一遍写出来的。2020-09-30 23:18:53

补充:
后来参与了 axe-ui ,一样搞起来。

想法

我打算做一个UI框架,基于vue3的UI框架,想法是进一步封装常用的组件,方便我书写element和antDesign。除了兼容基本的UI组件,我也想进一步封装业务组件,仿umi思路,高度封装常用组件,比如搜索框和表单的结合、通过jsonSchema 快速书写form表单等。

功能和亮点

这个框架会基于vue3,因为vue3有很多新的特性可以进行实践,并且基于vue3 的UI框架还不多。比如擎盾我司吴总有一个内部的 antD 项目,kkbjs的element3 正在路上,民间版的vue-antd 基本成型了,我未来想从事前端基建和性能优化,有个UI框架也是一个很好的实践过程。

这个组件的结构会重写,组织结构会大量参考element,因为我们公司的业务就是element可以快速实践,也会和吴总的思路一样,可能会考虑 mobile 和 antd

使用场景

如果再遇到后端项目,我可以使用我封装好的npm包,快速进入开发,预览的效果和element看起来一样。

起名

这个UI框架可以慢慢实践,我要给他起一个名字,和兔子有关,因为兔子一般比较温顺、亲和,没有入侵性、攻击性,也符合我最初的想法,只是单纯封装element的常用组件。

想法

image.png image.png image.png
image.png image.png image.png
image.png

最终选择了这个作为Logo
兔子.png

名字就叫 Rabbit

现在 element 和 element-plus 各自发展,逐渐有区别了,我想整一个 element-x ,基于 vue-demi ,同时在 vue2/3 里跑
目标是,代码跑起来的效果和 element/element-plus 一样,单元测试也能效果一致

特点 温柔无害

  • 兼容 vue2/3
  • 兼容 element/element-plus
  • 反哺社区,成为各自的 contributor

基本技术点:

  • vue-demi 提供的 composition-api
  • setup 提供的语法糖,用起来更舒服
  • jest 的单元测试兼容
  • 实验性地使用 cypress-ct 来进行组件测试

参考

https://fudaosheng.gitee.io/vbest-ui/components/button/

https://vant-contrib.gitee.io/vant/#/zh-CN/button

https://www.iviewui.com/components/grid

https://didi.github.io/cube-ui/

https://antdv.com/docs/vue/introduce-cn/