注：本文部分內(nèi)容來自官網(wǎng)，如有問題請參考如下網(wǎng)站

https://ant.design/docs/react/introduce-cn

1. 請先完成掉坑之路（1）的內(nèi)容再進(jìn)行本文內(nèi)容。

2. 安裝antd依賴：

> npm install --save-dev antd

3. 安裝babel-plugin-import：

> npm install --save-dev babel-plugin-import

4. 在根目錄下創(chuàng)建一個.babelrc文件：

//.babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 文件
    }]
  ]
}

5. 測試：

首先引入antd包

import {Button, Layout} from 'antd';
const {Header, Content, Footer} = Layout;

然后調(diào)用Button組件以及布局組件，下面只展示Button使用示例

<Button htmlType={'submit'}>Button</Button>

附錄

//app/main.js
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Button, Layout} from 'antd';
const {Header, Content, Footer} = Layout;

class App extends Component{
    render(){
        return (
        <div>
            <Header>
                Hello, world!
            </Header>

            <Content style={{width:'1200px', height: '500px', textAlign:"center"}}>
                <Button htmlType={'submit'}>
                    Button
                </Button>
            </Content>

            <Footer style={{textAlign: 'center'}}>
                This is Footer<br/>
                By Victor Lin
            </Footer>
        </div>
    );
    }
}

ReactDOM.render(
<App/>,
    document.getElementById('root')
)