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
      }
    }
  }
}