使用babel-plugin-import按需加载ant-design-vue组件

babel-plugin-import安装

npm install babel-plugin-import --save-dev

less安装

babel-plugin-import需要用到less，因此应该先下载相关依赖

npm install less less-loader --save-dev

less配置

我用到时vue-cli搭建的项目。因此在vue.config.js中添加以下配置。

css: {
    loaderOptions: {
      less: {
        // 用于babel-plugin-import的less
        lessOptions: {
          javascriptEnabled: true,
        }
      },
    },
  },

.babelrc配置

在根目录下创建.babelrc文件

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "lib",   // default: lib
        "style": true
      },
    ]
  ]
}

局部引入组件

在需要使用组件的地方使用import引入。运行后就可以看见，样式也成功应用。

import { Button } from 'ant-design-vue';