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配置中添加配置:
javascript
{
"plugins": [
["import", { "libraryName": "antd", "style": true }]
]
}
4.在React组件中这样使用Ant Design组件:
javascript
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提供的所有组件了:
javascript
import 'antd/dist/antd.css' // 引入antd样式