又雙叒叕一個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

相關文章
相關標籤/搜索