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样式
相关推荐
槁***耿几秒前
前端路由守卫
前端
百***35483 分钟前
前端视频处理开发
前端·音视频
顾安r15 分钟前
11.29 脚本游戏 单页面格斗游戏模板
前端·javascript·css·游戏·virtualenv
g***557517 分钟前
Redis 通用命令
前端·redis·bootstrap
爱睡觉的雨21 分钟前
跨域问题(前端)
前端
我叫张小白。21 分钟前
Vue3 路由:单页面应用的核心引擎
前端·javascript·vue.js·前端框架·vue3
y***866925 分钟前
前端PWA应用特性使用指南
前端
天空陪伴星辰a27 分钟前
表单校验问题
前端·javascript·表单校验
鱼鱼块1 小时前
《最小栈的巧妙设计:用辅助栈实现 O(1) 获取最小值》
javascript·算法·面试
San301 小时前
反转字符串与两数之和:两道简单题背后的 JavaScript 思维深度
javascript·算法·面试