1、安装ant-design-vue

使用yarn 或 npm 安装并引入 ant-design-vue。

yarn add ant-design-vue

npm i --save ant-design-vue

2、安装 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件。

yarn add babel-plugin-import --dev

3、babel配置

修改babel.config.js文件，配置 babel-plugin-import参数。

//babel.config.js
 
// lazy load ant-design-vue
// if your use import on Demand, Use this code
plugins.push(['import', {
  'libraryName': 'ant-design-vue',
  'libraryDirectory': 'es',
  'style': true // `style: true` 会加载 less 文件
}])
 
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
};

4、组件使用

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

5、样式问题

babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

// main.tx
 
import 'ant-design-vue/dist/antd.less';