Ant Design 3.0 使用案例

代碼地址以下：<br>http://www.demodashi.com/demo/12309.html

本文適合對象

1. 有過React使用經驗。
2. 有過webpack使用經驗。
3. 瞭解node。

DEMO使用方式

1. npm install
2. npm run start
3. npm run startfe
4. 登陸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 使用案例

代碼地址以下：<br>http://www.demodashi.com/demo/12309.html

注：本文著做權歸做者，由demo大師代發，拒絕轉載，轉載須要做者受權