vue3 + ant中ant按需引入

在Vue 3中使用Ant Design Vue时，可以通过babel-plugin-import插件来实现按需引入组件。首先需要安装这个插件：

npm install babel-plugin-import -D

然后，在babel.config.js或.babelrc文件中配置插件：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true, // 加载less
      },
    ],
  ],
};

在Vue组件中，你可以这样按需引入Ant Design Vue组件：

<script>
import { Button, Select } from 'ant-design-vue';
 
export default {
  components: {
    'a-button': Button,
    'a-select': Select,
  },
};
</script>
 
<template>
  <a-button type="primary">按钮</a-button>
  <a-select :options="[1, 2, 3]"></a-select>
</template>

这样，在构建时，babel-plugin-import会自动引入所需的Vue组件和样式文件，而不是整个Ant Design Vue库，从而减少最终打包文件的大小。