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样式
相关推荐
Mintopia1 分钟前
计算机架构演进:适应不断变化的计算需求
前端
之歆5 分钟前
Day01_HTML 基础知识完全指南:从零开始的 Web 开发之旅
前端·html
IT_陈寒5 分钟前
React状态管理这个坑,我终于爬出来了
前端·人工智能·后端
深海鱼在掘金10 分钟前
Next.js从入门到实战保姆级教程(第二章):环境配置与项目初始化
前端·typescript·next.js
深海鱼在掘金12 分钟前
Next.js从入门到实战保姆级教程(第三章):项目结构与文件系统约定
前端·typescript·next.js
水木流年追梦17 分钟前
CodeTop Top 300 热门题目3-字符串相加
java·前端·算法
编码七号17 分钟前
使用playwright做前端项目的端对端自动化测试
前端·功能测试·自动化
禅思院19 分钟前
中篇:构建弹性的异步组件
前端·架构·前端框架
夜影风19 分钟前
Nginx部署Vue/React项目时无法直接访问页面其他路径的问题及解决方案
vue.js·nginx·react.js
码王吴彦祖22 分钟前
AI 逆向分析国航 AirChina FECU 参数来源并实现离线生成
android·java·javascript