vue按需导入ant-design-of-vue

1.开发环境 vuecli4
2.电脑系统 windows10专业版
3.在使用ant-design-vue的时候,我们开发的时候,不一定会使用到所有的组件,为了减少项目的体积,我们要按需导入,下面我来分享一下方法。
4.废话不多说,直接上操作:

npm i ant-design-vue -D

5.在babel.config.js中添加如下代码:

plugins: [
    ['import', {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
    }] // `style: true` 会加载 less 文件
  ]

6.如果报错
vue按需导入ant-design-of-vue_第1张图片

// 解决方法:
npm i babel-plugin-import -D

vue按需导入ant-design-of-vue_第2张图片
7.在main.js中添加如下代码:

// 导入antdesignvue
import { Button } from 'ant-design-vue'
Vue.use(Button)

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

你可能感兴趣的:(vue按需导入ant-design-of-vue)