1 插件安装准备
- ant-design-vue
- babel-plugin-import
yarn add ant-design-vue babel-plugin-import
2 项目配置
2.1 babel.config.js
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true, // 官网只写css
},
],
],
2.2 vue.config.js
引入css样式文件必须在这里配置下面内容:防止不支持内嵌js报错。
css: {
loaderOptions: {
less: {
// 自定义主题样式
// modifyVars: {
// 'primary-color': '#41B883',
// 'link-color': '#41B883',
// 'border-radius-base': '2px'
// }
// 解决ant-vue引入不被允许的内嵌js问题
javascriptEnabled: true,
},
},
},
3 按需引入Ant-Design-Vue模板
import {
ConfigProvider,
Layout,
Input,
InputNumber,
Button,
Switch,
Radio,
Checkbox,
Select,
Card,
Form,