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样式
相关推荐
爱勇宝7 小时前
《道德经》第6章:别把团队的创造力用到枯竭
前端·后端
无双_Joney7 小时前
[四期 - 4] NestJS专栏 - 征召一下大家的意见,非常想知道大家都想看看Nest的哪些方面
前端·后端·nestjs
彭亚川Allen7 小时前
停更的这一年,All In AI、陪媳妇生娃、还考了个研
前端·后端·产品经理
爱分享的程序猿-Clark8 小时前
【前端开发】前端开发者如何使用 Claude Code 快速搭建 React 项目!(小白都能学会的教程)
前端·react.js
এ慕ོ冬℘゜8 小时前
原生 JS 实现自定义单选日历组件(无 UI 库、纯手写、禁用过去日期)
开发语言·javascript·ui
_kerneler8 小时前
cgroup :限制cpu原理
java·服务器·前端
mONESY9 小时前
Skill 技能与 MCP 协议的底层逻辑与协同真相
javascript
yingyima9 小时前
AWK 速查手册:不仅仅是文本处理,更是性能与简洁的抉择
前端
悟空瞎说9 小时前
WebSocket 前端丢包处理实战:原理与完整代码实现
前端
秋天的一阵风9 小时前
✨ 原来文本转换可以这么丝滑!UnifiedJS 实战指南来了
前端·github·markdown