1.在React项目中使用Ant Design,首先需要安装Ant Design:
npm install antd --save
2.按需引入Ant Design组件,以减小最终打包的大小。使用babel-plugin-import插件可以实现按需加载。首先安装插件:
npm install babel-plugin-import --save-dev
3.在.babelrc或babel配置中添加配置:
{"plugins": [["import", { "libraryName": "antd", "style": true }]]
}
4.在React组件中这样使用Ant Design组件:
import React from 'react'
import { Button } from 'antd'const App = () => {<div><Button type="primary">Click me</Button></div>
}export default App
5.引入整个Ant Design库及样式,如下,然后就可以在组件中直接使用Ant Design提供的所有组件了:
import 'antd/dist/antd.css' // 引入antd样式