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样式
相关推荐
前端小D11 分钟前
JS核心底层
前端·javascript
律宏阔22 分钟前
Taro 4 项目从 npm 迁移到 pnpm 踩坑实录
前端·微信小程序·taro
用户308169987648522 分钟前
同一句话问 AI 15 次,答案 15 个:temperature 0 实测也不稳
前端
SameX25 分钟前
ArkTS 做 5 态数据流 —— 咖啡电量的代谢状态机怎么驱动 UI
前端
Dovis(誓平步青云)26 分钟前
启元 T1 Pro 人机相声搭档:语音-触摸双通道的启元机器人节奏引擎设计
开发语言·前端·javascript·microsoft·交互
爱吃烧烤的技术渣29 分钟前
别再手写 CRUD 了:我把 Element Plus 的工作量压缩成一份列 schema
前端·vue.js
MetWeave32 分钟前
风的三十年:一个机场的风在变小吗:10,958 天的账(《风不是一个数》系列第 6 篇)
前端·数据可视化
青烟小生35 分钟前
前端实时协同编辑与 CRDT 冲突解决实战:从 OT 到 Yjs 底层原理(完整版)
前端
陈随易37 分钟前
神级 Skill,让 AI 用 HTML 代替 Markdown 回复
前端·后端·程序员
eidnxndrdkdns1 小时前
PE 自校验的三个坑:恒失败、基址变化、以及被漏在外面的检测器
前端