antd在HTML文件里引用,Webpack掉坑之路（2）——Antd组件引用

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

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')

)