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样式
相关推荐
能源革命29 分钟前
Vue 网格拖拽布局组件全景指南:7 大方案深度对比
前端·javascript·vue.js
知野小兔41 分钟前
JavaScript中Map和Set详解
javascript
穆梓兰煊44 分钟前
AI供应链安全不再只是包安全,还涉及模型与数据
前端·数据库
deli0071 小时前
Skill 怎么写才被 Agent 命中?18 条规则做成 SKILL.md 校验器,规范样例 92 分
前端
Hum8le1 小时前
CTF题目《easy_web》(安洵杯 2019 变种 Web)
前端·安全·web安全
coding漫漫长路1 小时前
二值化后还剩1212个黑点,OCR却认成了乱码
前端
不可能片场1 小时前
AI视频口型对齐 用音频驱动说话镜头
前端·electron
Lank_M1 小时前
OCR一个字没认错,倾斜2.5°却把行序排乱了
前端
daols881 小时前
vue 表格组件 vxe-table 实现自定义多行编辑功能
前端·javascript·vue.js·vxe-table
不要试图纠正别人1 小时前
别让大模型算钱:我把优惠券组合优化写成了确定性算法
前端