在使用vue+antd组件按需引入时遇到的坑

一 、安装ant-design-vue

npm i --save ant-design-vue

二.、引入

1.完整引入

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '',
});

2. 按需引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

Vue.use(Button)

Vue.config.productionTip = false

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

三、根据官方文档配置babel-plugin-import

1. 安装babel-plugin-import

2. 配置babel.config.js

其中style:true表示会去编译less文件，但是在编译less文件时就会报下面的错误

四、遇到的坑

1. 第一次会报错

./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /myproject/react/antedemo/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)

2. 第二次报错

3. 解决方案

其实上面两个错误都是编译不了less文件，可能时less和less-loader的版本太高了，但是也可以去在创建vue.config.js文件，去进行下面配置就能解决按需引入的bug了

• less-loader版本大于5.0以上

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
};

• less-loader版本大于6.0以上

module.exports = {
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                },
            },
        },
    },
}