react UI 组件库Ant Design of React的使用

学习网址：https://ant.design/docs/react/introduce-cn

github地址：https://github.com/hushaohhy/react-router-dom-demo/tree/future/1.0.2

github更改的内容：https://github.com/hushaohhy/react-router-dom-demo/commit/fe2ab0f9f1c155b5f797bc2b9c095f5480ce1fbe

本文运行环境均是create-react-app创建的应用。

1、安装antd

yarn add antd --save-dev

2、使用方法如下图所示

引入antd中的组件，引入样式即可使用。

3、上述例子实际上是加载离开antd组件中的全部的样式，这样做对前端的性能很不好，因此使用babel-plugin-import来进行按需加载。

4、babel-plugin-import的使用

参考网址：https://blog.csdn.net/qq_24147051/article/details/88318895

安装babel-plugin-import

yarn add babel-plugin-import --save-dev

在package.json中

加入下图所示的代码

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

再来更改引入的方式：

此时只需要引入组件即可，不用引入css了。