因为之前react一直使用antd，转vue后，还是想用顺手的样式，所以又开始连接antd
我连了一天，把vue.config.js配置了一遍，出现了各种报错，没有连上准备放弃的时候，突然连上了！！！
连接方法其实很简单，奈何我太菜

首先是vue less

先通过vue add style-resources-loader插件方式安装style-resources-loader，选择less
然后修改vue.config.js
emmm这个文件在vue3.0里面没有，所以大家可以自己在根目录下面建一个
vue-cli配置指南官网

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = {
    // ...
    pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [
            resolve('path/to/global.less')
          ]
        }
    }
}

这个时候你就发现已经可以使用less样式了

导入antd

yarn add  ant-design-vue

然后将antd引入到main.js中，这种方法是将antd全部导入到项目中，如果想要按需导入请移步官网antd

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
Vue.config.productionTip = false;
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app');

之后修改babel.cinfig.js,加入plugins

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

运行一下，会发现Antd is not defined😭
这个时候只需要将导入Antd地址改成

import Antd from 'ant-design-vue/es';

然后就发现可以用了可以啦，哭泣