React中使用antDesign框架

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样式
相关推荐
前端加油站2 分钟前
记一个前端导出excel受限问题
前端·javascript
da_vinci_x6 分钟前
PS 生成式扩展:从 iPad 到带鱼屏,游戏立绘“全终端”适配流
前端·人工智能·游戏·ui·aigc·技术美术·游戏美术
一壶纱7 分钟前
uni-app 中配置 UnoCSS
前端·vue.js
坐吃山猪8 分钟前
Electron02-Hello
开发语言·javascript·ecmascript
步履不停_9 分钟前
告别输入密码!打造基于 VS Code 的极致远程开发工作流
前端·visual studio code
狗哥哥15 分钟前
Vue 3 企业级表格组件体系设计实战
前端
尘世中一位迷途小书童23 分钟前
JavaScript 一些小特性:让你的代码更优雅高效
前端·javascript·架构
草帽lufei25 分钟前
高强度SOLO真实业务项目
前端·ai编程·trae
1024肥宅25 分钟前
告别异地登录告警!用 GitHub Self-Hosted Runner 打造“零打扰”全栈自动化部署
前端·后端·github
GDAL27 分钟前
CSS重置样式表(Reset CSS
前端·css