什么是Ant Design？

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

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

如何引用Ant Design？

1.首先擁有一個(gè)React項(xiàng)目

運(yùn)用官網(wǎng)的命令創(chuàng)建一個(gè)react項(xiàng)目

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

cd my-appnpm run start

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

2.在項(xiàng)目中安裝Ant Design

引入css樣式庫(kù)

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

進(jìn)行代碼測(cè)試：

效果:

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

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

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

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

2.點(diǎn)擊組件,進(jìn)入組件菜單頁(yè)面（這里我們以button按鈕為例）
點(diǎn)擊左側(cè)的Button選項(xiàng) 點(diǎn)擊代碼演示的展開(kāi)代碼（如下圖所示）

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

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

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