當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ant Design 3.0 使用案例

發布時間：2025/4/5 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ant Design 3.0 使用案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

代碼地址如下：
http://www.demodashi.com/demo/12309.html

本文適合對象

有過React使用經驗。

有過webpack使用經驗。

了解node。

DEMO使用方式

npm install

npm run start

npm run startfe

登錄localhost:8088查看效果

注：demo中node使用pm2進行管理和啟動，如果需要查看終端輸出，可以使用pm2 log命令查看。

本demo是在macOS環境下開發運行的，若是windows環境運行有問題，可以在評論留言。

關于AntDesign

雖然Antd是一門非常棒的UI設計語言，但是在我個人看來，Antd比較適合用作后臺系統開發，并不是非常適合用在前端頁面開發。

后臺頁面不需要給用戶看，因此以樣式和開發效率以及功能為主。

現在的網站十分看重用戶體驗，前端項目的體積需要盡可能的小，然而Antd組件由于擁有充足的功能和接口，就導致組件的體積必然不小。

作為通用組件庫，Antd組件擁有在大部分情況下都可以用得到的接口，但是在我們具體的業務中，可能只需要其中的一兩個功能，但是卻不得不引入整個組件，本來5kb就可以完成我們所需功能的代碼，現在卻變成了50kb甚至100kb的代碼量，這在前端項目中是十分致命的問題。

在index.js文件中，我只引入了Menu和Icon兩個組件，文件大小就已經飆升到了450kb。

import { Menu, Icon } from 'antd';

即使使用了Uglifyjs插件對js文件進行壓縮，最后還是有200kb左右的大小。

可能如果要我們自己的業務中實現這個Menu組件，只需要幾kb就可以了。

但是這并不能否認Antd本身的優秀，即使是前端工程師，也可以從Antd組件中學習到很多東西，甚至我們平時開發組件的時候，都是按照antd的標準和接口設計去進行開發的。

這里是知乎上對Antd設計語言的評價：鏈接。

這里是antd發行3.0版本的版本那說明：鏈接。

Ant Design 3.0 按需加載

快速引入使用

我們通過npm安裝好了antd之后，不可能直接將antd全部組件都引入進來，那樣會導致包的提及非常大，所以必須使用按需加載，用到什么組件就引入什么組件。

npm install --save antd

若npm速度太慢，可以安裝淘寶的國內鏡像cnpm。

npm install -g cnpm

然后用cnpm安裝就會快很多。

cnpm install --save antd

安裝完成之后，我們只需要在react組件中引入組件即可。

import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 注意，這里antd實用的是less樣式，如果webpack沒有配置對less的解析的話，這樣引入會報錯。 // 可以直接使用引入css的方式 // import 'antd/lib/button/style/css';

這樣引入之后，我們就可以在下面直接使用Button組件了。

<Button>This is a Button</Button>

但是這種引入方式十分繁瑣，不僅路徑名太長，而且我們每引入一個組件，還需要專門到相應的style文件里面引入樣式文件。

就沒有一種方法可以直接引入組件就可以了嗎？

答案當然是有的。

配合babel自動加載

如果你使用過webpack和es6語法，那么你一定知道什么是babel，如果你對babel不了解，那么可以先到babel中文網了解一下。

我們如果在項目中使用了babel，就可以配合babel-plugin-import插件自動按需加載。

npm install --save babel-plugin-import

安裝好插件之后，我們在根目錄下創建一個.babelrc文件(注意直接以.開頭)，用來對全局babel進行配置。

{"plugins": [["import"]] }

這樣我們就可以自動引入babel-plugins-import插件了。

使用了這個插件之后，我就可以變成這種寫法了：

import { Button } from 'antd';

babel-plugin-import 可以幫我們把這種寫法自動編譯成如下這種寫法：

import Button from 'antd/lib/button';

現在路徑名過長的問題解決了。

關于引入樣式的問題，我們可以還是通過babel-plugin-import插件的style屬性來做到組件樣式自動加載。

{"plugins": [["import", {"libraryName": "antd", "style": true}]] }

這樣，在組件中，我們就可以直接用import { Button } from 'antd';這種寫法自動引入組件和組件相對應的樣式文件了。

不過這里要注意的是，import插件的style屬性，不僅會引入組件樣式，還會引入一些必要的全局樣式，大家使用的時候要注意，官方建議如果沒有必要的話，可以不使用該屬性。

組件代碼截圖：

前端組件展示截圖：

自此，在項目中引入antd的工作就完成了。

補充項目截圖

本文只是講述了如何在項目中引入antd，因為沒有業務場景，所以并沒有寫具體的前端頁面，大家看demo的時候盡量看代碼配置即可。

demo是在上一篇的demo：react-cli的基礎上進行改造的，可能有很多沒必要的插件和配置文件，大家忽略即可。Ant Design 3.0 使用案例