ant design of vue 组件库按需引用

文档

官网
参考文档

安装ant design of vue

npm i --save ant-design-vue

自动按需引入组件 （推荐）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1、安装babel-plugin-import插件

npm i babel-plugin-import -D

2、修改babel.config.js里代码，增加如下代码：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
    "import",
    { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

3、可能出现问题

4、解决方案
修改vue.config.js文件，添加下面的配置

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // less vars，customize ant design theme

          // 'primary-color': '#F5222D',
          // 'link-color': '#F5222D',
        },
        // DO NOT REMOVE THIS LINE
        javascriptEnabled: true
      }
    }
  },

5、在src/main.js进行全局性的按需引用即可

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import 'lib-flexible'
import './less/base.less'
import './less/global.less'

//按需引用
import { Button,message } from 'ant-design-vue';

//按需注册
Vue.use(Button);
Vue.prototype.$message = message;

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");