引入antd

最新推荐文章于 2024-08-11 15:33:20 发布

向阳菌

最新推荐文章于 2024-08-11 15:33:20 发布

阅读量2.2k

点赞数

文章标签：前端框架前端

本文链接：https://blog.csdn.net/m0_68997646/article/details/127429086

版权

本文介绍了如何在React项目中优化antd库的使用，通过按需加载减少项目依赖包大小，提升运行效率。首先，通过yarn添加antd库，然后安装babel-plugin-import插件进行按需加载配置。在webpack.config.js中找到.babelrc文件并启用。最后，展示了在App.js中创建一个简单的Button组件的代码，以此说明antd组件的使用方法。

摘要由CSDN通过智能技术生成

1.下载组件库包

yarn add antd

2.配置按需加载：因为如果在使用的时候，全部将antd引入，那么会导致系统的依赖包太大，从而会影响到项目运行的速率。

A.安装按需加载的插件

npm install  babel-plugin-import --save

B.找到如下文件

node_modules => react-scripts => config => webpack.config.js

C.使用快捷键ctrl+f搜索.babelrc文件

然后将其中的babelrc的属性从false改为trueI（我现在这里已经改成true了）

3.在页面当中设置一个非常简单的button按钮

App.js

// 应用根组件
import React,{Component} from 'react'
import {Button,message} from 'antd'
export default class App extends Component{
    handleClick=()=>{
        message.success('成功了');
    }
    render(){
        return <Button type="primary" onClick={this.handleClick}>Primary</Button>
    }
}

index.js

//在这里是入口文件
import React from 'react'
import ReactDOM  from 'react-dom'
import antd from 'antd/dist/antd.css'



import App from './App'   //引入根组件
ReactDOM.render(<App></App>,document.getElementById('root'))
// 将App组件渲染到页面上

上述这些代码可以在百度搜索antd，在官网上就会显示具体的组件code了