一、安裝使用

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 手動引入，並覆蓋全局樣式。

001-安裝及快速入門【基於純antd的基本項目搭建】