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

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

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

目前組件有如下：

其它特點：

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

其它說明：

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

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

使用教程：

1.安裝nodejs

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

2.安裝Yarn

因為npm在國內安裝很慢，所以需要安裝yarn或者cnpm

npm install -g yarn

3.安裝腳手架

先創建個空目錄，在該目錄下執行

yarn create @umijs/umi-App

根據提示選擇然后回車執行安裝就行了

4.編譯啟動

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

現有的項目使用antd

yarn add antd

相關鏈接：

項目官網：https://ant.design

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