react配合antd

antd是蚂蚁金服推出的一款很棒的react  ui库。

官方网站：https://ant.design/docs/react/introduce-cn

首先要有react环境

安装：npm install antd --save

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

还要引用其样式：import 'antd/dist/antd.css'

但是这样直接引用样式会有一些不必要的组件也被引入进来 需要配置webpack进行按需加载

安装babel-plugin-import

npm install babel-plugin-import --save-dev

配置webpack：

{ 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: "babel-loader", 
                query:
                  {
                    presets:['es2015','react'],
                    plugins: [
                        ["import", {libraryName: "antd", style: "css"}] //按需加载
                    ]
                  },
            },

放在module rules下面

上述配置完毕

直接使用组件

<Switch defaultChecked={false} />