通过vue脚手架3安装antd-vue
vue add ant-design
开始配置按需引入配置
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件,如果需要样式自动加载那么要先装这个插件
npm install babel-plugin-import --dev
安装完后需要配置babel.plugin.config文件,完全安装官方文档做
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"import",
{libraryName: "ant-design-vue", libraryDirectory: "es", style:true}
]
]
}
新建一个antd.js文件,把需要的组件引入进来
import Vue from 'vue';
import {Switch} from 'ant-design-vue';
Vue.use( Switch)
在main.js中引入ants.js文件,配置完毕
结果
运行就报错
解决办法
TMD后面发现官方文档有bug,上面配置babel.config.js文件配置有问题
[
"import",
{libraryName: "ant-design-vue", libraryDirectory: "es", style:true}
]
这个style的值不是true,把他改成css,重新运行就好了
{libraryName: "ant-design-vue", libraryDirectory: "es", style:"css"}
TMD,老子花了几个小时就找这个bug。