使用ANTD前端开发——开发环境搭建（Windows）

使用ANTD（ant design）开发需要安装Node.JS，cnpm，tyarn，umi等包。yarn是npm的替代品，正如tyarn取代cnpm。在未来的项目中我们会使用tyarn进行JS的包管理。

Node.JS安装成功后，在安装路径下有 npm 命令脚本。npm是Node.JS的包管理器，可以使用npm命令安装各种所需的包。但由于npm包的默认安装源在国外，速度慢，因此需将安装源映射在国内。需要安装cnpm和tyarn。

Next.js中不能直接使用css，需要我们自行解决：

（1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css

（2）安装成功，需要在根目录建立 next.config.js

(3)重启项目

（1）先安装Ant Design 库： npm install --save antd

（2）再安装babel-plugin-import： npm install --save babel-plugin-import

目的：只加载项目中用到的模块，这就需要我们用到一个 babel-plugin-import 文件，配置好了 .babelrc 就不会把Ant Design打包到生产环境。

（3）重启项目

（4）在需要的页面引入

一、react+antd创建项目

npm install -g create-react-app //全局安装脚手架create-react-app

create-react-app react-cli-demo //创建项目create-react-app

cd react-cli-demo //进入到create-react-app目录里面

yarn start //启动项目

yarn add antd //安装antd

二、重写App.js页面

1、在头部导入

import React, { Component } from 'react'

import 'antd/dist/antd.css'

import { Carousel, Tooltip} from 'antd'

2、构造函数定义

3、图片轮播函数定义

4、放大缩小和拖动事件

5、页面渲染

按钮定义

图片定义

渲染

三、总结：antd爬坑：当由不轮播变为轮播时，antd没有更新autoplay，需要手动设置

this.refs.carousel.innerSlider.autoPlay()

github地址： https://github.com/MangliZeng/react-cli-app.git

---