react脚手架如何按需引入antd

在项目中需要安装以下几个关键的包，不然容易出现各个报错：

  yarn add antd babel-plugin-import customize-cra dotenv-cli less less-loader;

接下来在入口文件index.js引入antd的样式
index.js中加入：

import "antd/dist/antd.min.css";

最后在根目录下建一个js文件：config-overrides.js
文件内容按需引入

const {
  override,
  fixBabelImports
} = require("customize-cra");
module.exports = override(
  // 按需引入
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
  )

最后，在组建中引入对应的组件使用
例如 App.vue组件中

import { Table } from "antd";
function App() {
  const dataSource = [
    {
      key: "1",
      name: "胡彦斌",
      age: 32,
      address: "西湖区湖底公园1号",
    },
    {
      key: "2",
      name: "胡彦祖",
      age: 42,
      address: "西湖区湖底公园1号",
    },
  ];

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "住址",
      dataIndex: "address",
      key: "address",
    },
  ];
  return (
    <>
      <Table dataSource={dataSource} columns={columns} />
    </>
  );
}

export default App;