引入antd

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了