ant-design-vue按需引用组件

方案一：

import Vue from 'vue'
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
Vue.use(Button)

方案二：

1. package.json中添加依赖引入devDependencies

"less": "^2.7.3"
"less-loader": "^5.0.0"
"babel-plugin-import": "^1.12.1"

或者：

yarn add less less-loader babel-plugin-import -D

2. 修改babel.config.js

	plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css' // 这里很重要，不要用true，而是直接用css字符串的写法
      }
    ]
  ]

3. 修改vue.config.js (这一步非常是因为antbug导致的)

  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }

4. 修改main.js,删除全局引用部分的代码

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

// 按需加载后，下面全局方法，需要手动引用
import { Modal, message, notification } from 'ant-design-vue'
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$warning = Modal.warning
Vue.prototype.$error = Modal.error
Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$notification = notification

5. 具体组件和页面中修改：

import { Button } from 'ant-design-vue'
Vue.use(Button)

6. 完成