vue-cli如何按需引入Ant-design-vue

第一步通过vue-cli安装ant-design

vue add ant-design

第二步配置按需引入配置

antd官方文档提到的 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}
        ]
    ]
}

第三步引入需要的组件

import Vue from 'vue';
import {Button} from 'ant-design-vue';
Vue.use( Button)

然后运行，你就会发现报错了。。。
因为官方文档上的babel.config.js里的配置有问题

        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style:true}
        ]

这个style的值不是true，而是css，重新运行就没问题了

    {libraryName: "ant-design-vue", libraryDirectory: "es", style:"css"}

还是太年轻，哈哈哈哈，挂在官方文档上