使用开源的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 (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }
  
  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