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

例行惯例,欢迎来波star:

仓库地址:vueComponent/ant-designhtml

官方网站:A UI Design Languagevue

为什么造这个轮子:

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

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

vue-antd-ui的特色:

组件库”彻底”按照antd 3.4.0版本实现

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

共享ant design生态资源

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

按需加载

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

受控/非受控

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

接下来的工做:

完善组件,目前已经提供了经常使用组件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

相关文章
相关标签/搜索