ant-design-vue 按需加载

通过 babel-plugin-import 按需加载

首先 在项目中安装 ant-design-vue

npm install ant-design-vue --save

确保项目中已安装 babel-plugin-import

npm install babel-plugin-import --save-dev

配置 babel.config.js 文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    ['import', {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: 'css', // style: true 时加载的是less文件
    }],
  ],
};

创建 lazy_antd.js 并在文件内引入需要的组件

import Vue from 'vue';
import {
  Button,
  Message,
} from 'ant-design-vue';

Vue.use(Button);

Vue.prototype.$message = Message;

在 main.js 中 import lazy_antd.js

开发使用