Webpack掉坑之路（2）——Antd组件引用

注：本文部分内容来自官网，如有问题请参考如下网站

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

1. 请先完成掉坑之路（1）的内容再进行本文内容。

2. 安装antd依赖：

> npm install --save-dev antd

3. 安装babel-plugin-import：

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

4. 在根目录下创建一个.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;

然后调用Button组件以及布局组件，下面只展示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 (
        

            

                Hello, world!
            

            
                
                    Button
                
            

            

                This is Footer

                By Victor Lin
            
        
    );
    }
}

ReactDOM.render(
,
    document.getElementById('root')
)