• 官方文档 查阅

1. 下载安装

• yarn add antd 安装 antd
• yarn add @craco/craco 安装 craco
• yarn add craco-less 下载 less ，支持 less 格式文件
• yarn add @babel/plugin-proposal-decorators 下载支持装饰器使用的模块

2. package.json 中修改属性

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

3. 根目录创建 craco.config.js 文件

• 里面的代码：

const CracoLessPlugin = require('craco-less');

module.exports = {
  babel: {   //用来支持装饰器
	   plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4. 引入 less 文件

• 在 src 目录下的 index.js 文件中

import 'antd/dist/antd.less'

5. 某个组件中使用 antD 组件

import {Button} from 'antd'

render(){
	return(
		<div>
			<Button>点击一下</Button>
		</div>
	)
}

5. 某个组件中使用 装饰器

• 主要用于高阶组件

import React, { Component } from 'react'

import WithCopy from "./WithCopy"  //WithCopy 是一个高阶组件
import {Button} from "antd"

@WithCopy
class About extends Component {
    render() {
        return (
            <div>
                <Button>点击一下</Button>
            </div>
        )
    }
}
// export default WithCopy(About)   
export default About

//写法不同，功能下同
1. @WithCopy + export default About 
	===
2. export default WithCopy(About)