Ant-design 快速上手
阿新 • • 發佈:2019-02-09
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)。
5、腳手架會生成一些檔案,直接用下面的程式碼替換index.js
的內容
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