發(fā)布于 2023.06.06（芒種）

Ant Design 是螞蟻集團(tuán)對(duì)外開(kāi)源的一套 UI 設(shè)計(jì)，官方有針對(duì)這套設(shè)計(jì)的 React ?實(shí)現(xiàn)，即 Ant Design of React，也就是我們熟知的 antd，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品，社區(qū)也有一些基于其他框架的實(shí)現(xiàn)。

官網(wǎng)地址：https://ant.design/docs/react/introduce-cn

創(chuàng)建樣板項(xiàng)目

官方?jīng)]有這塊例子，自己搭建！

先創(chuàng)建一個(gè)樣板項(xiàng)目（采用 Vite React TS 模板）：

注意：為了更快的安裝速度，我使用了 yarn 這個(gè)包管理器，沒(méi)有安裝的話可以通過(guò) npm install -g yarn指令安裝。

按照上述指示進(jìn)入項(xiàng)目目錄，安裝依賴，啟動(dòng)開(kāi)發(fā)環(huán)境。

安裝 antd 依賴

執(zhí)行指令：yarn add antd。

引入 antd

修改 App.tsx 文件，改成下面這樣：

<DatePicker> 的 onChange 事件提供的是 dayjs.Dayjs 類型，我這里沒(méi)有引入，為了避免 TS 報(bào)錯(cuò)，我從 DatePickerProps['onChange'] 中解析出了類型用作事件處理器參數(shù)的類型聲明。

不過(guò)最好還是使用 dayjs 依賴比較好。

引入 dayjs

效果：

引入 Alert 組件

效果：