什么是Ant Design？

Ant Design是螞蟻金服體驗技術部經過大量的項目實踐和總結，沉淀出設計語言 ，這但并不是單純的設計語言，設計原則、控件規范和視覺尺寸，它還配套有前端代碼實現方案。也就是說采用Ant Design后，UI設計和前端界面研發可同步完成，效率大大提升。目前有多家公司例如：阿里、美團、滴滴、簡書采用。

Ant Design的官網： ant.design/index-cn

如何引用Ant Design？

1.首先擁有一個React項目

運用官網的命令創建一個react項目

使用這條命令創建一個my-app文件夾， 創建完成后會在當前目錄下出現一個my-app的文件夾，進入my-app目錄，運行npm run start

cd my-appnpm run start

然后你就可以在瀏覽器中看到默認的React的頁面了，創建完成后的文件效果如下圖所示：

2.在項目中安裝Ant Design

引入css樣式庫

修改 src/App.css，在文件頂部引入 antd/dist/antd.css。

進行代碼測試：

效果:

現在我們已經完成了Ant Design的引用。

如何使用Ant Design官網中的api

當我們完成綜上所述的操作時，你離靈活運用Ant Design就只差最后一步：熟記Api

1. 打開Ant Design的官網

2.點擊組件,進入組件菜單頁面（這里我們以button按鈕為例）
點擊左側的Button選項 點擊代碼演示的展開代碼（如下圖所示）

現在你就可以復制代碼到你自己的頁面中

這樣你就完成了Ant Design的引用與使用。

作者：孑律
鏈接：https://juejin.cn/post/7028844531776749581