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 分钟前
鸿蒙开发入门指南:前端开发者快速掌握常用布局
前端·css
咕噜咪11 分钟前
OpenLayers 入门教程:从零开始学习Web地图开发
前端·学习
炽烈小老头14 分钟前
前端最最最基础的基础HTML基础
前端·html
小霖家的混江龙24 分钟前
仿淘宝 AI 推荐:用 Next.js 构建入门智能水果推荐 Demo
前端·人工智能·next.js
诚诚程程成30 分钟前
URL Query Editor 前端开发工具:方便调试页面URL参数 URL参数可视化
前端
CHU72903533 分钟前
直播逛购新体验——直播商城APP前端功能详解
前端·小程序
Jackson__37 分钟前
Agent Skill 和 MCP 到底有什么区别?很多人搞混了
前端·ai编程·mcp
new code Boy1 小时前
Vue2转Vue3速查表
前端·javascript·vue.js
紫_龙2 小时前
最新版vue3+TypeScript开发入门到实战教程之toRefs与toRef实用技巧
前端·javascript·typescript
大家的林语冰2 小时前
Vite 第 1 个 Rolldown 稳定版正式发布,前端构建又一波“工业革命“
前端·javascript·vite