又雙叒叕一個Ant Design的Vue輪子(vue-antd-ui)

zeka發表於2018-04-23

例行慣例,歡迎來波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

相關文章