ant design（一）

1、ant-design快速入手

官方文档：https://ant.design/docs/react/getting-started-cn

直接用下面的代码替换 index.js 的内容，用 React 的方式直接使用 antd 组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { LocaleProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + (date ? date.toString() : ''));
    this.setState({ date });
  }
  render() {
    return (
      <LocaleProvider locale={zhCN}>
        <div style={{ width: 400, margin: '100px auto' }}>
          <DatePicker onChange={value => this.handleChange(value)} />
          <div style={{ marginTop: 20 }}>当前日期：{this.state.date && this.state.date.toString()}</div>
        </div>
      </LocaleProvider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

运行结果为：

2、安装antd遇到的问题：

npm install antd --save

改为：

npm install --save-dev antd

知识点补充：

--save-dev和--save的区别

使用npm来进行前端包管理的时候，我们会用到npm install或者cnpm install命令来安装需要用到的包资源

1: npm install *** --save-dev

2: npm install *** --save
我们通常会使用以上两种安装命令，而两者的区别在于：

当我们需要安装一些支持类的工具的时候，例如webpack，babel-loader之类时，我们希望用

npm install *** --save-dev 命令，该命令会使安装的包在package.json中的devDependencies:{***}中
当我们安装的是一些实际在项目代码中会用到的框架的时候，例如react，jquery，antd-design等，我们希望用

npm install *** --save 命令，该命令会使安装的包在package.json中的dependencies:{***}中


从package.json中的字段我们也可以理解为，但一些工具是在开发环境中才使用到的时候（在开发环境中我们会需要进行一些例如起本地服务，代理，转码，打包等操作），我们将其安装在devDependencies:{***}中


而对于在生产环境中同样会用到的工具框架（生产环境中已经是成熟的应用，所有的东西都应该是核心有效的），我们需要将其安装在dependencies:{***}中。

（当使用npm install --production的时候，只会安装dependencies:{***}中的项目。

3、npm安装教程（改变全局变量）

链接：https://www.cnblogs.com/goldlong/p/8027997.html

链接：https://blog.csdn.net/williamfan21c/article/details/55517558

注意，是在nodejs安装目录下，新建两个文件夹，node_global 和node_cache

不用重新装npm了，因为，nodejs安装的时候，就已经在node_module中生成了

4、引入React

import { 组件名称 } from 'antd'（比如import { Switch } from 'antd'）

5、在用react-app-rewired时，配置出现的问题

注意：config-overrides.js文件是在项目的根目录创建的 ，不是用的react-app-rewired根目录下 的config-overrides.js

另外更改package.json也是项目的。

改成：

会出现：

注意：不能把“eject”去掉。

得完整：

结果为：

6、create-react-app脚手架中配置webpack的方法：

引自：http://www.mamicode.com/info-detail-2204275.html

概述
create-react-app脚手架中的react-scripts能够

(1)帮我们自动下载需要的webpack依赖；

(2)自己写了一个nodejs服务端脚本代码；

(3)使用express的Http服务器；

(4)并帮我们隐藏了配置文件。

那么假如我们需要额外配置webpack该怎么办呢？比如添加md的loader。

我总结了2种方法，供以后开发时参考，相信对其他人也有用。

方法一
运行如下命令即可把配置文件显示出来：
npm run eject
//然后输入Y
输入后项目目录会多出一个congfig文件夹，里面就有webpack的配置文件。
但是此过程不可逆，所以显现回来后就不能再隐藏回去了。

方法二
(以修改babel插件实现按需加载antd为例，修改其它配置可以仿照这个方法来做。)
(1)使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）和babel-plugin-import（一个babel的管理加载的插件）。

(2)修改package.json 里的启动配置。
(3)在项目根目录创建一个 config-overrides.js 用于修改默认配置。

7、npm安装module：

默认全局安装路径在c盘，用户，APPData，Roaming，npm下；

全局：-g

命令终端的当前路径：没有-g

在安装nodejs时，会把npm也安上；在node_module中。

所以安装别的模块时，要放到一个全局文件夹中，否则可能会在nodejs根目录下安装时，把原先生成的node_module覆盖掉。

8、