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样式
相关推荐
用户47949283569154 分钟前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond5 分钟前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端
俊劫6 分钟前
AI 编码技巧篇(内部分享)
前端·javascript·ai编程
Maxkim7 分钟前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang8 分钟前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket
Mr_chiu9 分钟前
数据可视化大屏模板:前端开发的效率革命与架构艺术
前端
进击的野人9 分钟前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
ZsTs1199 分钟前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈
命中水10 分钟前
从怀疑到离不开:我第一个由 AI 深度参与完成的真实项目复盘
前端·openai
我是ed10 分钟前
# Vue3 图片标注插件 AILabel
前端