又双叒叕一个Ant Design的Vue轮子(vue-antd-ui)

17,330 阅读4分钟

例行惯例,欢迎来波star:

仓库地址:vueComponent/ant-design

官方网站:A UI Design Language

为何造这个轮子:

  1. 用惯了Antd,再看其他的总觉得没有Antd好用 周边生态,组件数量及质量都是略胜一筹,至于样式,每个人的审美不一样,就不加评判了,不过个人还是喜欢antd的。
  2. 社区很多Antd的Vue实现,大多已经弃坑,已经实现的也多是阉割版 github搜索关键词 vue ant 共93条结果,搜索vue ant-design也有51条结果。
  3. 希望让Vue开发者也能享受到Ant Design的优秀设计,技术选型时不再因为组件库的原因放弃Vue。

Antd的优点我就不说了,用过的人都知道。

vue-antd-ui的特点:

组件库”完全”按照antd 3.4.0版本实现

一样的html结构,一样的CSS样式,一样的动画效果。 全部组件(已完成46/53 = 87% 组件),全部功能。 90%的组件接口一致(由于vue框架的特性,某些API可能有所改变,如果你使用vue jsx,接口基本可以一致)。 90%的代码复用(虽然vue和react是不同的框架,不过他们还是有很多相似的概念,以及vue对jsx的支持,使得我们可以复用antd大部分代码)。

共享ant design生态资源

antd不仅仅是一个组件库,而是一门设计语言,提供了配套的设计资源(A UI Design Language),由于我们保持了组件的结构样式动画的一致性,你可以直接使用antd官方提供的设计资源 antd积累了丰富的语言包,在我们的组件库中你可以直接使用这些语言包。

按需加载

同样使用antd官方出品的babel-plugin-import(ant-design/babel-plugin-import)

受控/非受控

大多vue组件没有受控/非受控之分,一般情况是使用指令v-model控制组件状态(可以理解为react中的受控组件),虽然你可以通过v-model方式完成你的功能,不过对于非受控方式,依然觉得有存在的必要。例如:tabs组件,大多情况下我们只需要初始化的时候提供defaultActiveKey=“index01”就可以满足需求了,而如果使用v-model就意味着需要一个变量来控制activeKey,当然这也不是什么大的问题,只是从某种角度来说,这个变量是完全没有用处的,再加上vue将props、data、methods都挂载在this上,词汇量不够啊有木有,诸如此类的场景还有Modal,Menu等,所以我们保留了react的非受控使用方式。

接下来的工作:

完善组件,目前已经提供了常用组件46个,antd官方共53个组件,我们会不断补全所有组件 补全测试用例,由于时间精力问题,暂时没有测试用例,我们会尽快补全测试用例,进一步保障组件的质量

弃坑的担忧:

Ant Design经历过多年的迭代和积累,不管是数量还是质量,单靠个人或零散团队去重新实现一套其它框架的版本都不是一件简单的事情,正如前面提到的一样,社区有很多antd的Vue实现,可惜的是大多已经弃坑。 我们的组件是基于antd 3.4.0版本(截止到2018-4-16 antd官方最新版为3.4.1)开发,就数量和功能来说,已经可以满足大部分需求。 我们不承诺以后不会弃坑,但就目前来说,我们会持续更新组件及修复bug,期望大家能够多多使用,多多star,你们的反馈是我们最大的动力。 也欢迎各位社区开发者加入我们,共同开发和维护vue-antd-ui,期待您的帮助。

感谢

vue-antd-ui复用了大量的antd官方代码,在此特别感谢ant design团队的辛勤付出,也期待ant design一统三大框架。

仓库地址:vueComponent/ant-design

官方网站:A UI Design Language