一、首先要安裝務必確認 Node.js 已經升級到 v4.x 或以上。node
二、打開cmd,輸入「npm install antd-init -g」,安裝antd(能夠本身先指定安裝目錄);react
三、antd安裝成功後,輸入「mkdir antd-demo」建立antd-demo;npm
四、接着輸入「cd antd-demo」,開發demo的目錄;瀏覽器
五、隨後輸入「antd-init」,安裝npm依賴;服務器
六、antd-demo文件夾裏會產生一些文件,而後把文件夾裏的index.js替換成下面的代碼:antd
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 import { DatePicker, message } from 'antd'; 4 5 class App extends React.Component { 6 constructor(props) { 7 super(props); 8 this.state = { 9 date: '', 10 }; 11 } 12 handleChange(date) { 13 message.info('您選擇的日期是: ' + date.toString()); 14 this.setState({ date }); 15 } 16 render() { 17 return ( 18 <div style={{ width: 400, margin: '100px auto' }}> 19 <DatePicker onChange={value => this.handleChange(value)} /> 20 <div style={{ marginTop: 20 }}>當前日期:{this.state.date.toString()}</div> 21 </div> 22 ); 23 } 24 } 25 26 ReactDOM.render(<App />, document.getElementById('root'));
七、關掉全部cmd;dom
八、從新打開兩個新的cmd,肯定每一個cmd都進入到antd-demo文件夾裏;ui
九、其中一個cmd輸入「npm srart」,開啓服務器;this
十、另外一個cmd輸入「npm run build」,構建和部署antd-demo;spa
十一、瀏覽器地址欄輸入「http://localhost:8000」,查看效果。
十二、效果以下: