1. 环境搭建:
(1)安装node.js
(2)更换npm为淘宝的源
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(3)安装webpack,babel和脚手架工具
$ sudo cnpm install -g webpack babel-cli antd-init
(4)创建一个项目并初始化
$ mkdir antd-demo && cd antd-demo
$ antd-init
$ cnpm install
(5)开发调试
$ cnpm run dev
注:如果报错missing script: dev的话,可以改用cnpm start
然后访问:http://127.0.0.1:8989
(6)构建和部署
$ cnpm run build
2. 目录文件结构:
(1)index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./index.css"/>
<!--[if lt IE 10]>
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
</head>
<body>
<div id="react-content"></div>
</body>
<script src="./common.js"></script>
<script src="./index.js"></script>
</html>
(2)entry/index.jsx
import '../common/lib';
import App from '../component/App';
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<App />, document.getElementById('react-content'));
(3)component/App.jsx
import React, { Component } from 'react';
import { DatePicker } from 'antd';
import './App.less';
class App extends Component {
render() {
return <DatePicker />;
}
}
export default App;