1、首先要安装务必确认 Node.js 已经升级到 v4.x 或以上。

2、打开cmd,输入“npm install antd-init -g”,安装antd(可以自己先指定安装目录);

3、antd安装成功后,输入“mkdir antd-demo”创建antd-demo;

4、接着输入“cd antd-demo”,开发demo的目录;

5、随后输入“antd-init”,安装npm依赖;

6、antd-demo文件夹里会产生一些文件,然后把文件夹里的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'));

7、关掉所有cmd;

8、重新打开两个新的cmd,确定每个cmd都进入到antd-demo文件夹里;

9、其中一个cmd输入“npm srart”,开启服务器;

10、另一个cmd输入“npm run build”,构建和部署antd-demo;

11、浏览器地址栏输入“http://localhost:8000”,查看效果。

12、效果如下:

如何在win7上安装ant-design的更多相关文章

  1. 如何在windows7上安装启明星系统。

    启明星系统提供多种安装方式.安装包里自带了setup.exe.每个程序的 install下有在线安装(例如请假应用程序为book,则默认为 http://localhost/book/install ...

  2. 如何在Zabbix上安装MySQL监控插件PMP

    PMP,全称是Percona Monitoring Plugins,是Percona公司为MySQL监控写的插件.支持Nagios,Cacti.从PMP 1.1开始,支持Zabbix. 下面,看看如何 ...

  3. Win7上安装Linux双系统

    今天帮同学在Win7上安装Linux,感觉一篇教程很不错,mark一下 原地址:Win7下U盘安装Ubuntu14.04双系统步骤详解 一.前期准备 1.大于2G的U盘一个(我的系统盘制作完成后大约占 ...

  4. (转)如何在Windows上安装多个MySQL

    原文:http://www.blogjava.net/hongjunli/archive/2009/03/01/257216.html 如何在Windows上安装多个MySQL 本文以免安装版的mys ...

  5. 如何在win7上面安装python的包

    最近在win7上面搞python,然后写的一些代码涉及到了对Excel的读写.所以需要用到包xlrd xlwt  xlutils. 但问题是这些包import后显示的是找不到.错误提示是:Import ...

  6. Redis简介以及如何在Windows上安装Redis

    Redis简介 Redis是一个速度非常快的非关系型内存数据库. Redis提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object-C,Python,Ruby,Erla ...

  7. 如何在centos7上安装源码包

    在我们使用linux的过程中,有很多程序是通过红帽官网给的系统中安装的,但是一般来说,系统更新的速度比较慢,如果这个时候我们又想用最新版的该怎么办呢?总不能一直等系统升级吧╮(╯﹏╰)╭所以,我们可以 ...

  8. 如何在CentOS上安装一个2048小游戏

    如何在centos上安装一个2048小游戏 最近在学习CentOS系统,就琢磨着玩点什么,然后我看到有人在玩2048小游戏,所有我就在想,为啥不装一个2048小游戏搞一下嘞,于是乎,我就开始工作啦 由 ...

  9. Linux,在不使用U盘的情况下使用wubi.exe程序在Win7上安装ubuntu-14.04.3版系统

    本文介绍如何在不使用U盘的情况下使用wubi.exe程序在Win7上安装ubuntu-14.04.3版系统. 花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot ...

随机推荐

  1. Asp.net Mvc中分部视图获取后台数据并展示

    方式一: 1.主页面中代码: @{Html.RenderAction("CreateLeftMenu");} 2.Controller中代码: public PartialView ...

  2. C#面试(2016年4月)

    1.WebForm和MVC的区别 MVC: 1)通过model.view.controller将处理后台逻辑代码与前台展示逻辑代码进行了很好的分离: 2)通过修改路由规则,可以控制生成自定义的url, ...

  3. awk sed 总结

    Awk总结笔记 介绍 90年代 new awk :nawk Linux 的是gawk 我们简化awk 用法 #  awk [options ] ‘scripts’ file1 file2 .... # ...

  4. sourceTreee设置忽略的文件

    1.忽略不想要的目录,比如bin.obj目录(每次运行本机程序都会变化) 这个在右上角的Settings的Advanced下面的Repository-specific ignore list,点击Ed ...

  5. 为什么Pojo类没有注解也没有spring中配置<bean>也能够被加载到容器中。

    Spring的注入机制其实就是代替了new的这个过程(称为解耦). 写了一个Thread类,没有加注解@Component,但是可以正常运行,开始为了自圆其说,打通逻辑,猜测是StartThread中 ...

  6. 【Python学习】函数参数传递方法四种(位置,关键字,默认值,包裹位置,包裹关键字传递)

    1. 位置传递: #--coding:utf-8-- def send(name,address): return 'package is sent to %s, located in %s' %(n ...

  7. 开通博客的第一天上传我的C#基础笔记,个人觉得很好用。

    1.索引器  string arrStr = "sddfdfgfh";  索引器的目的就是为了方便而已,可以在该类型的对象后面直接写[]访问该对象里面的成员  Console.Wr ...

  8. html5 webDatabase 存储中sql语句执行可嵌套使用

    html5 webDatabase 存储中sql语句执行可嵌套使用,代码如下: *); data.transaction(function(tx){ tx.executeSql("creat ...

  9. 客户端使用java,服务端使用c++的corba编程环境搭建

    我们先用c++实现服务端和客户端,然后再用java编写客户端. 1. 首先安装omniORB,omniORB提供 omniidl命令,以及一些头文件和库. omniORB一般是需要你自己进行编译. 2 ...

  10. WebService "因 URL 意外地以 结束,请求格式无法识别" 的解决方法

    最近在做一个图片上传的功能,js调用用webservice进行异步访问服务器,对于不是经常用webservice的菜鸟来说,经常会遇到以下的问题(起码我是遇到了) 在页面上写了js调用代码如下所示: ...