1. 需要安装的几个包

# ant-design
npm i --save ant-design-vue@next
# less
npm install less less-loader --save-dev
# babel
npm install babel-plugin-import --save-dev

2. 需要改造的文件

• bable.config.js（修改）

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 需要添加的内容
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
};

• src/plugins/Ant/index.js（添加）

import {
  Carousel,
  ConfigProvider,
  Button
} from 'ant-design-vue'

const ant = {
  install (Vue) {
    Vue.component(Carousel.name, Carousel)
    Vue.component(ConfigProvider.name, ConfigProvider)
    Vue.component(Button.name, Button)
  }
}

export default ant

• src/main.js（修改）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ant from './plugins/Ant'

createApp(App)
  .use(store)
  .use(router)
  .use(ant)
  .mount('#app')

• vue.config.js（修改）

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
}

• src/App.vue（修改）

<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
export default {
  data () {
    return {
      locale: zhCN
    }
  }
}
</script>

3. 现在你可以使用了

<template>
  <div class="hello">
    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>
    <a-button type="primary">
      按钮
    </a-button>
    <a-button type="link">
      Link
    </a-button>
  </div>
</template>

image.png