001-ant design安装及快速入门【基于纯antd的基本项目搭建】

一、安装使用

1.1、安装

推荐使用 npm 或 yarn 的方式进行开发

npm install antd --save

yarn add antd

1.2、浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css

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

引入样式

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

1.3、按需加载

方式一、使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

注意：webpack 1 无需设置 libraryDirectory。

然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';

方式二、手动引入

import DatePicker from 'antd/lib/date-picker';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
// import 'antd/lib/date-picker/style';         // 加载 LESS

二、快速入门

2.1、安装脚手架工具

antd-init 是一个用于演示 antd 如何使用的脚手架工具，实际业务项目建议使用 dva-cli 和 create-react-app 进行搭建。

npm install antd-init -g

2.2、创建一个项目

mkdir antd-demo && cd antd-demo
antd-init

2.3、使用组件

直接用下面的代码替换 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';

moment.locale('zh-cn');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

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

你可以在左侧菜单选用更多组件。

2.4、开发调试

一键启动调试，访问 http://127.0.0.1:8000 查看效果。

npm start

2.5、构建和部署

npm run build

三、按需加载

如果你在开发环境的控制台看到下面的提示，那么你可能使用了 import { Button } from 'antd'; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.

可以通过以下的写法来按需加载组件。

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

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

import { Button } from 'antd';

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

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