Vue3 antd2 按需加载:You are using a whole package of antd

以前一直是用的ElementUI，这次准备用vue3撸个后台，看了下ElementUI Plus，和以前差不多，想换Ant Design Vue 2.x 试试不一样的姿势。
结果在按需引入的时候就开始踩坑，现记录一下：
环境如下：

• vue-cli 4.5.6
• vue 3.0.4
• ant-design-vue 2.0.0-rc.7

示例按需引入Button。
antd.ts:

import type { App } from 'vue';

import { Button }from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css'

const components = [Button]

export function setupAntd(app: App) {  
    components.forEach(plugin => {
        app.use(plugin)
      })    
}

main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import { setupAntd } from '@/plugins'
import router from '@/router'
import store from '@/store'


const app = createApp(App)
app.use(store).use(router)

//注册使用的ant-design-vue组件
setupAntd(app)

app.mount('#app')

运行起来后console出现黄字：You are using a whole package of antd

额，说好的按需引入呢。。。

image.png

官网文档说要安装 babel-plugin-import 。

yarn add babel-plugin-import -D

配置插件在babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

运行，报错缺少less，安装less less-loader
运行，报错less解析语法报错，搜了下less 3以上需要配置less option
在vue.config.js：

module.exports = {
  productionSourceMap: false,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // important extra layer for less-loader^6.0.0
          javascriptEnabled: true
        }
      }
    }
  }
}

这下搞定