这篇文章是一遍想一遍写出来的。2020-09-30 23:18:53
想法
我打算做一个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的常用组件。
想法
最终选择了这个作为Logo
名字就叫 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