1、在開始之前，先下載Node.js v4.x 或以上。

2、安裝後在win+r輸入npm install antd-init -g 安裝antd

3、使用命令列進行初始化。

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

antd-init 會自動安裝 npm 依賴，若有問題則可自行安裝。

若安裝緩慢報錯，可嘗試用 cnpm 或別的映象源自行安裝：rm -rf node_modules && cnpm install。

如安裝緩慢報錯，檢視步驟4。

4、選裝cnpm

4.1、說明：因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常，如果npm的伺服器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事。！來自官網：“這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”

4.3、安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟，安裝完直接使用有可能會出現錯誤；

注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';

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

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

6、開發除錯#

$ npm start