1、首先我們介紹下如何在vue中全局引入Ant Design Vue

1.1、輸入命令npm i --save ant-design-vue@1.7.2下載指定版本

$ npm i --save ant-design-vue@1.7.2

1.2、main.js文件引入并使用

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

2、按需引入，我們這里講vue-cli3x及以上版本的

2.1、需要在下載好ant-design-vue@1.7.2版本后執行npm install babel-plugin-import --dev下載用于按需加載組件代碼和樣式的 babel 插件

$ npm install babel-plugin-import --dev 

2.2、修改babel.config.js文件，配置 babel-plugin-import

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

2.3、src目錄下創建文件夾plugins，然后創建antd.js 如下按需引入即可，用到啥組件引用啥組件

import Vue from 'vue'
import {
    Button,
    Checkbox,
    DatePicker,
    Form,
    Input,
    message,
    Modal
} from 'ant-design-vue';

import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 樣式入口文件


Vue.use(Button)
Vue.use(Checkbox)
Vue.use(DatePicker)
Vue.use(Form)
Vue.use(Input)

Vue.prototype.$message = message
Vue.prototype.$confirm = Modal.confirm;

2.4、main.js文件引入antd.js

import './plugins/antd';

2.5、因antd.js有用到less文件 故項目如沒有配置less 還需下載并配置less

$ npm install less@3.9.0 less-loader@5.0.0 --save-dev  
//執行npm install less@3.9.0 less-loader@5.0.0 --save-dev命令下載less 及less-loader

2.6、項目主目錄下與src同級創建vue.config.js文件并如下配置就完成了按需引入

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

創作不易，歡迎點贊收藏！