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样式
相关推荐
暗不需求2 分钟前
从零实现一个 Vue Todos 任务清单:深入响应式编程与组合式 API
前端·vue.js·面试
超绝大帅哥3 分钟前
TTFB, FP, FCP, LCP, CLS, INP,TBT, TTI性能指标
前端
用户1733598075376 分钟前
纯前端 PDF 处理避坑指南:5 个线上真实问题的解决方案
前端·javascript
Csvn8 分钟前
前端项目管理:需求拆解、排期与风险控制
前端
陈_杨10 分钟前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript
Goodbye11 分钟前
深入理解 JavaScript 变量提升(Hoisting)—— 从现象到原理
javascript
橘子星12 分钟前
从零上手!Node.js 快速搭建生成式 AI 后端项目|密钥安全 + 完整可运行代码
前端·后端
陈_杨12 分钟前
鸿蒙APP开发-带你开发锻艺册APP的材料清单功能
前端·javascript
xixixin_15 分钟前
Promise.all 和 Promise.allSettled 详解
前端·javascript·vue.js
暗冰ཏོ15 分钟前
前端数据大屏开发完整指南:Vue3 + ECharts 自适应可视化实战
前端·javascript·echarts·数据大屏·大屏端