Ant-design 快速入门
2016-09-23 09:32
399 查看
1、下载node.js4.x及以上,然后安装。
2、安装后在win+r输入npm install antd-init -g 安装antd
3、创建ant-demo 输入mkdir antd-demo 创建antd-demo
4、cd antd-demo
5、安装npm依赖 输入 antd-init --type plain-react 此时会产生一些文件
将以下代码替换\antd-demo\src\entries\index.js的内容
6、重开”运行” npm start输入开始服务器
7、另一个”运行”进入ant-demo目录 , npm run build构建和部署antd-demo
8、url访问127.0.0.1:8989/antd-demo
9、访问效果如下即可
2、安装后在win+r输入npm install antd-init -g 安装antd
3、创建ant-demo 输入mkdir antd-demo 创建antd-demo
4、cd antd-demo
5、安装npm依赖 输入 antd-init --type plain-react 此时会产生一些文件
将以下代码替换\antd-demo\src\entries\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输入开始服务器
7、另一个”运行”进入ant-demo目录 , npm run build构建和部署antd-demo
8、url访问127.0.0.1:8989/antd-demo
9、访问效果如下即可
相关文章推荐
- Ant Design Pro快速入门
- Ant快速入门(三)-----定义生成文件
- ant快速入门教程
- Ant快速入门(一)-----Ant介绍
- react入门篇 ant-design
- Ant快速入门(四)-----Ant的任务(Task)
- ant design入门学习笔记
- Ant快速入门(二)-----使用Ant工具
- React + Ant Design 快速上手
- Struts快速入门(一)icecloud [翻译]
- RIP路由协议快速入门
- (转)Oracle RMAN快速入门指南
- Toad 使用快速入门
- XML快速入门
- NUnit快速入门 笔记
- toad快速入门(zz)
- IBM大型机术语快速入门
- [译作]LOG4J快速入门及参考资料
- XSLT入门 -- 第2章 基础篇: XSLT快速参考2 [转]
- KJAVA MIDP 2.0: The Game API快速入门