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';
