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样式
相关推荐
木西8 分钟前
Nest.js实战:构建聊天室的群聊与私聊模块
前端·后端·nestjs
数字人直播10 分钟前
跨境电商如何选择高转化率的AI数字人直播平台?
前端·后端
天生我材必有用_吴用11 分钟前
深入理解JavaScript设计模式之代理模式
前端
华洛32 分钟前
《从0到1打造企业级AI售前机器人——实战指南五:处理用户意图的细节实现!》
javascript·vue.js·node.js
掘金安东尼1 小时前
7个【宝藏工具】从智能画图到 SSL 自动化,一应俱全
前端·面试·github
zhangxingchao1 小时前
Flutter屏幕适配指南
前端
石小石Orz1 小时前
被对象嘲讽,写个网页护眼宝你都不会么
前端
江城开朗的豌豆1 小时前
🔥 Vue组件传值:小杨教你玩转父子组件通信
前端·javascript·面试
江城开朗的豌豆1 小时前
Vue组件花式聊天指南:6种传值妙招,总有一款适合你
前端·javascript·vue.js
黑土豆1 小时前
在Vue3项目中实现PDF文件解析与预览的完整实践
前端·javascript·vue.js