Vue集成Ant Design（Vue 3.0 + Ant Design 2.0）

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（修改）

3. 现在你可以使用了

image.png