Vue-Cli 按需引入Ant Design of Vue 组件库

一）、安装Ant Design of Vue

cnpm install ant-design-vue --save

二）、安装babel-plugin-import

官方文档 使用 babel-plugin-import

为了方便进行按需引入Ant Design of Vue组件，使用 babel-plugin-import

是一个用于按需加载组件代码和样式的 babel 插件

此插件配合 style 属性可以做到模块样式的按需自动加载

cnpm install babel-plugin-import --save

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

使用 vue-cli 3 的小伙伴

module.exports = {
  presets: ["@vue/app"],
  // 按需引入Ant Design of Vue组件样式
  plugins: [
    [
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
    ]
  ]
};

四）、在src/main.js文件中，引入Antd组件

完整组件列表

// 引入Ant Design of Vue组件
import {Card, Avatar, Icon} from 'ant-design-vue'

Vue.component(Card.name, Card);
Vue.component(Card.Meta.name, Card.Meta);
Vue.component(Card.Grid.name, Card.Grid);
Vue.component(Avatar.name, Avatar);
Vue.component(Icon.name, Icon);

可能出现的问题

https://github.com/ant-design/ant-motion/issues/44

Module build failed (from ./node_modules/[email protected]@less-loader/dist/cjs.js):

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

解决方案

修改vue.config.js文件，添加下面的配置

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // do not remove this line
        javascriptEnabled: true
      }
    }
  }
}