框架简介

Ant Design为Web应用程序提供了企业级UI设计语言，其中包含一组开箱即用的高质量React组件。它是用TypeScript编写的，具有完整的定义类型。并且支持服务端渲染。github star 47K+, MIT 协议，最新版本v3.19.5。

框架主要功能

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 全链路开发和设计工具体系。

浏览器支持

IE / Edge: IE9, IE10, IE11, Edge( IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题)

Firefox/Chrome/Safari/Opera/Electron: last 2 versions。

快速上手

• 本地环境

Node.js v8 或以上

• 安装npm 包

npm install antd
yarn add antd

• 用法

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

• 手动引入

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

• 按需加载组件

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件

antd/es/button 可以加载 ES 版本的模块，方便进一步 Tree Shake.

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

import { Button } from 'antd';

插件会帮你转换成 antd/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'antd/dist/antd.css' 手动引入，并覆盖全局样式。

直接使用antd组件

直接用下面的代码替换 index.js 的内容，用 React 的方式直接使用 antd 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';
moment.locale('zh-cn');
class App extends React.Component {
 state = {
 date: null,
 };
 handleChange = date => {
 message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`);
 this.setState({ date });
 };
 render() {
 const { date } = this.state;
 return (
 <LocaleProvider locale={zhCN}>
 <div style={{ width: 400, margin: '100px auto' }}>
 <DatePicker onChange={this.handleChange} />
 <div style={{ marginTop: 20 }}>
 当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
 </div>
 </div>
 </LocaleProvider>
 );
 }
}
ReactDOM.render(<App />, document.getElementById('root'));