什么是Ant Design？

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

Ant Design的官網(wǎng)： ant.design/index-cn

如何引用Ant Design？

1.首先擁有一個React項目

運用官網(wǎng)的命令創(chuàng)建一個react項目

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

cd my-appnpm run start

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

2.在項目中安裝Ant Design

引入css樣式庫

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

進行代碼測試：

效果:

現(xiàn)在我們已經(jīng)完成了Ant Design的引用。

如何使用Ant Design官網(wǎng)中的api

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

1. 打開Ant Design的官網(wǎng)

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

現(xiàn)在你就可以復(fù)制代碼到你自己的頁面中

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

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