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样式
相关推荐
尤小小24 分钟前
Vite-SSG 实践:Vue项目预渲染落地完整方案
前端·vue.js
默_笙31 分钟前
🍕 AI 的嘴巴装了水管(上):从"等它说完"到"边说边听"的流式输出指南
前端·javascript
lichenyang45332 分钟前
让 VK 小程序调用 HarmonyOS 原生能力:壳子 SDK 的实现思路
前端
梨想橙汁42 分钟前
Vue3 组合式 API 深度解析:ref/reactive 响应式,计算属性与侦听器
前端·vue.js
暖焰核心42 分钟前
继承全解——继承、默认成员函数、切片、隐藏与虚继承
java·前端·javascript
by组态1 小时前
Ricon组态系统API参考手册
前端·后端·物联网
前端逗比逗1 小时前
AI 前端落地实战:SSE 流式输出、断点续传、打字机渲染
前端·webassembly
晴天161 小时前
前端跨域方案解析:JSONP 的原理、实战与演进
前端·状态模式
web打印社区1 小时前
浏览器静默打印?先别装第三个库了
前端·vue.js·chrome·electron·pdf
艾伦野鸽ggg1 小时前
前端异步请求的状态竞争(请求竞态)问题
前端·javascript·axios