使用开源的ant-design库开发项目指南

1. 最流行的开源React UI组件库

material-ui(国外)
- 官网: http://www.material-ui.com/#/
- github: https://github.com/callemall/material-ui
ant-design(国内蚂蚁金服)
- 官网: https://ant.design/
- github: https://github.com/ant-design/ant-design/

2. ant-design使用入门

使用create-react-app搭建react开发环境

  ```
  npm install create-react-app -g
  create-react-app antd-demo
  cd antd-demo
  npm start
  ```

搭建antd的基本开发环境

下载
```
npm install antd --save
```

src/App.js

import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}

export default App;

src/App.css

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

实现按需加载(css/js)

使用 eject 命令将所有内建的配置暴露出来
```
npm run eject
```

首先打开webpack.config.dev.js
在147行添加这段代码

plugins: [
                       ['import', [{ libraryName: "antd", style: 'css' }]],
                    ],

这里写图片描述

同样的配置在webpack.config.prod.js里面也需要添加。

这里写图片描述

这样就真正实现了按需加载，就不会再报黄色的警告。

还有第二种简单的方式，就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖（个人支持第二种）

下载babel-plugin-import(用于按需加载组件代码和样式的 babel 插件)
```
npm install babel-plugin-import --save-dev
```

修改配置: webpack.config.dev.js

// Process JS with Babel.
{
  test: /\.(js|jsx)$/,
  include: paths.appSrc,
  loader: 'babel',
  query: {
+   plugins: [
+     ['import', [{ libraryName: "antd", style: 'css' }]],
+   ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true
  }
},

image.png

去除引入全量样式的语句: src/App.css
```
```
@import '~antd/dist/antd.css'
```
```

其他自定义配置可参考官网:https://ant.design/docs/react/use-with-create-react-app-cn

React-UI教程