如何在win7上安裝ant-design

一、首先要安裝務必確認 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」,查看效果。

十二、效果以下:

相關文章
相關標籤/搜索