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. 五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  2. Java提高篇—— 简单介绍Java 的内存泄漏

    java最明显的一个优势就是它的内存管理机制.你只需简单创建对象,java的垃圾回收机制负责分配和释放内存.然而情况并不像想像的那么简单,因为在Java应用中经常发生内存泄漏. 本教程演示了什么是内存 ...

  3. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  4. pip安装

    首先安装 python 和python-devel 然后 https://pypi.python.org/pypi/pip/ 下载 tar.gz 解压,安装 tar zxvf pip-8.1.1.ta ...

  5. web前端基础知识 - Django进阶

    1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...

  6. C#,C++修改vs文件模板,添加自定义代码版权版本信息

    简单型的修改类似该路径下的模板文件即可(vs版本或安装路径不同路径可能不同) C#: 模板参数参考https://msdn.microsoft.com/zh-cn/library/eehb4faa.a ...

  7. hdu 1556

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  8. windows 下编辑shell,到linux报错,也是windows换行等造成

    sed -i 's/\r$//' shell.sh 然后linux 下就不会报语法错误了.

  9. html5开发移动页面去掉点击出现的透明阴影----&&-----元素垂直居中

    [摘要:做好的页里正在脚机端测试时,发明局部扫瞄器,tap后会涌现一个半通明的灰色配景,(被批...),起先认为是outline作祟,减上后发明出反映,末了发明是tap后的配景下明,要重设那个]   ...

  10. C与C++中的常用提高程序效率的方法

    1.用a++和++a及a+=1代替a=a+1,用a--和--a及a-=1代替a=a-1 通常使用若把一个函数定义为内联函数,则在程序编译阶段,编译器就会把每次调用该函数的地方都直接替换为该函数体中的代 ...