[FE] Hello Ant Design
2016-03-17 本文已影响838人
何幻
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;
