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样式
相关推荐
小江的记录本5 分钟前
【JEECG Boot】 JEECG Boot 数据字典管理——六大核心功能(内含:《JEECG Boot 数据字典开发速查清单》)
java·前端·数据库·spring boot·后端·spring·mybatis
小江的记录本5 分钟前
【JEECG Boot】 JEECG Boot——Online表单 系统性知识体系全解
java·前端·spring boot·后端·spring·低代码·mybatis
John_ToDebug6 分钟前
Chromium 页面类型与 IPC 通信机制深度解析
前端·c++·chrome
Fanfffff7207 分钟前
前端进阶:从请求竞态到并发控制(系统学习笔记)
前端·笔记·学习
大、男人8 分钟前
edge浏览器打开baidu.com很慢,我是如何解决的
前端·edge
吴声子夜歌9 分钟前
ES6——函数的扩展详解
前端·ecmascript·es6
斌味代码10 分钟前
Next.js 14 App Router 完全指南:服务端组件、流式渲染与中间件实战
开发语言·javascript·中间件
有趣的老凌10 分钟前
一篇文章带你了解 Agent Skills —— 告别AI“失控”
前端·agent·claude
~ rainbow~13 分钟前
前端转型全栈(二)——NestJS 入门指南:从 Angular 开发者视角理解后端架构
前端·javascript·angular.js