Vue 3.x Ant Design 使用 babel-plugin-import 来进行按需加载

最近学习用Ant Design Vue 开发项目，按照官方的快速上手进行了安装。

默认是全局引入，打包后体积很大，非常影响首屏加载速度，需要用到按需加载，仅引入要使用的组件。

不得不说官方文档写的很烂💩，用的React举例，全是坑，在这完整分享下怎么做。

1. 安装 babel-plugin-import

cnpm i babel-plugin-import --dev --save

某种未知原因，我用npm安装一直报错404，改用cnpm就好了。

2. 安装 less-loader

cnpm install less-loader --save-dev

控制台报错，提示缺少less-loader，好的 。

3. 安装less

cnpm install less --save-dev

Antd 是用less编写的，还需要安装less。

4. 配置babel.config.js

配置根目录下的babel.config.js，没有的话就手动创建个，写入以下配置。

module.exports = {
   
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
    libraryName: "ant-design-vue"