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样式
相关推荐
mayaairi2 分钟前
JS DOM与事件处理完全指南
服务器·前端·javascript
恋猫de小郭15 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜15 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_4260039618 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc30 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH31 分钟前
HTML 的 <main> 元素
前端·html
深念Y33 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰44 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs1 小时前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员1 小时前
还有高手?用Shader让图片中的3D圆环转起来!
前端