Ant Design Vue import on demand

Install Ant Design Vue using npm or yarn

npm i --save ant-design-vue@next

yarn add ant-design-vue

Install/configure the babel-plugin-import plugin

npm install babel-plugin-import -D

Install/configure less + less-loader plugin 

npm install less less-loader --save-dev

babel.config.js file

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true} // `style: true` 会加载 less 文件
    ]
  ]
}

vue.config.js file

• less-loader ^5.0.X

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

• less-loader ^6.0.X

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

Configure components that need to be introduced on demand

• main.js
• If there are many components, you can create a new antd.js file, which is only used to introduce the necessary components, and introduce the traversal use in the main.js file

import { createApp } from 'vue'
import App from './App.vue'
import { Button} from 'ant-design-vue'

createApp(App).use(Button).mount('#app')

•  app.vue

    <a-button type="primary" ghost>Primary</a-button>
    <a-button >Default</a-button>
    <a-button type="dashed" >Dashed</a-button>
    <a-button type="primary" danger ghost>Danger</a-button>