ant-design环境配置

发表于

本文主要目的是介绍一下ant-design的基本配置，你也可以直接去官网根据自己的需要配置。本文的配置是基于一个react-hot-webpack-boilerplate，想了解详细信息，可以在我的github上查看。

1
npm install antd --save

Ant.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Button from 'antd/lib/button';
import './Ant.css';
class Ant extends React.Component {
    render() {
        return (
            <div className = 'Ant'>
                <Button type = 'primary'>Button</Button>
            </div>
        )
    }
} 
export default Ant;

Ant.css

1
2
3
4
5
@import '~antd/dist/antd.css';
.Ant {
    text-align: center;
}

页面显示：

运行结果

为了按需加载组件，我们使用babel-plugin-import：

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

Ant.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import { Button } from 'antd';
import './Ant.css';
class Ant extends React.Component {
    render() {
        return (
            <div className = 'Ant'>
                <Button type = 'primary'>Button</Button>
            </div>
        )
    }
} 
export default Ant;

Ant.css和最终显示的结果都同上。