使用AntDesignVue

1.安装

# 使用npm
$ npm install ant-design-vue --save
# 使用yarn
$ yarn add ant-design-vue

2.按需加载组件

下面两种方式都可以只加载用到的组件。而且是同时加载样式。

Vue-Cli

• 使用 babel-plugin-import（推荐）。

  // .babelrc or babel-loader option
  {
  "plugins": [
   ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
  }

  
  然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { DatePicker } from 'ant-design-vue';

  Vite

  需要安装unplugin-vue-components。

  $ yarn add unplugin-vue-components -D

然后配置：

// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default {
  plugins: [
    /* ... */
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ],
};

但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib