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} />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!