Ant Design是螞蟻金服推出的一款用于研發(fā)企業(yè)級中后臺產(chǎn)品設計體系的 React UI 組件庫。第一個公開版本是2015年發(fā)布的，算是比較早的了。一開始大部分程序員都認為這是阿里KPI的產(chǎn)物，不過這么多年來一直持續(xù)迭代，我可以說這是最強UI組件，Github的star達到了78.5K，目前官方維護的是React版本，VUE版本是社區(qū)維護。

企業(yè)級產(chǎn)品是一個龐大且復雜的系統(tǒng)，數(shù)量多且功能復雜，而且變動和并發(fā)頻繁，常常需要設計者與開發(fā)者能快速做出響應。同時這類產(chǎn)品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩(wěn)定且高復用性的內(nèi)容。

當然因為企業(yè)級產(chǎn)品組件比較多，小公司每一個組件都去開發(fā)費時費力，直接拿大廠的UI組件庫直接搭起來開發(fā)效率就快多了，大廠的UI設計和審美還是沒話說的，開發(fā)的時候直接關注業(yè)務邏輯就可以了。

目前組件有如下：

其它特點：

• 支持更換主題色
• 支持動態(tài)更換主題色(沒試過)
• 支持國際化
• 支持TS開發(fā)
• 可以套娃在Electron里面
• 官方提供了Sketch，Axure，墨刀等設計產(chǎn)品原型軟件的設計資源

其它說明：

重型組件適合表格，表單等定制化強的需求下使用，這些組件是屬于ProComponents，需要單獨安裝使用。

里面的日期時間組件輸出格式都是使用moment格式，非常適合自己個性化渲染，具體教程可以搜索moment.js(也可以用dayjs代替，體積更小，兩者操作方法一模一樣)。

使用教程：

1.安裝nodejs

nodejs下載：http://nodejs.cn/

2.安裝Yarn

因為npm在國內(nèi)安裝很慢，所以需要安裝yarn或者cnpm

npm install -g yarn

3.安裝腳手架

先創(chuàng)建個空目錄，在該目錄下執(zhí)行

yarn create @umijs/umi-App

根據(jù)提示選擇然后回車執(zhí)行安裝就行了

4.編譯啟動

先執(zhí)行yarn進行編譯，然后執(zhí)行yarn start運行，最后訪問控制臺輸出的地址

現(xiàn)有的項目使用antd

yarn add antd

相關鏈接：

項目官網(wǎng)：https://ant.design

Github項目地址：https://github.com/ant-design/ant-design/