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

学习网址:

github地址:

github更改的内容:

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

1、安装antd

yarn add antd --save-dev

2、使用方法如下图所示

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

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

4、babel-plugin-import的使用

参考网址:

安装babel-plugin-import

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

在package.json中

加入下图所示的代码

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

再来更改引入的方式:

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

经验分享 程序员 微信小程序 职场和发展