ant-design-vue vue2项目引入报错无法启动

删除原来的版本下载指定的版本

npm uninstall ant-design-vue
npm install ant-design-vue@1.7.8 --save

按需引入插件下载

npm install babel-plugin-import --dev

babel.config.js文件修改

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
    plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: 'css'
      }
    ]
  ]
};

创建 antd.js 按需引入

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

Vue.use(Button)

main.js 导入antd.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./utils/antd";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

这样就可以使用了

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <a-button type="primary">按钮</a-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>

效果图底下的按钮，记得重启项目