vue+vue-design-vue使用配置问题

vue项目里使用ant-design-vue 报错

ERROR in ./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./node_modules/ant-design-vue/dist/antd.less)
  Module build failed (from ./node_modules/less-loader/dist/cjs.js):
  
  
  // https://github.com/ant-design/ant-motion/issues/44
  .bezierEasingMixin();
  ^
  Inline JavaScript is not enabled. Is it set in your options?
        in D:\demo\my-project\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)
   @ ./node_modules/ant-design-vue/dist/antd.less 4:14-94 14:3-18:5 15:22-102
   @ ./src/renderer/main.js
   @ multi ./.electron-vue/dev-client ./src/renderer/main.js

修复方法： 在vue.config.js的module.exports = {}里添加

css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

1、完整引入在main.js里

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: '<App/>',
});

2、如果按需引入需要使用babel-plugin-import （一个用于按需加载组件代码和样式的 babel 插件） npm install babel-plugin-impor --save 使用 vue-cli 3 的小伙伴 # 修改babel.config.js文件，配置 babel-plugin-import

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

在使用的组件页面添加效果如图 p1-jj.byteimg.com/tos-cn-i-t2…

<template>
  <div class="home">
    <div class="main">
      <div>
        <img src="../assets/image/logo.png">
        hahah
        <a-button type="primary">
          Button> hhh
        </a-button>
        enenen
      </div>
      <div>
        <template>
          <a-breadcrumb>
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
            <a-breadcrumb-item>An Application</a-breadcrumb-item>
          </a-breadcrumb>
        </template>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Breadcrumb } from 'ant-design-vue';
import Vue from 'vue';

Vue.use(Button)
  .use(Breadcrumb);


export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }],

    };
  },
  watch: {

  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
  },
};
</script>

<style lang='scss'>
.home{
  height:100%;
}
.main{
  max-width:1200px;
  margin:0 auto;
  min-width:70%;
  border:1px solid red;
  height:100%;
}
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

3、如果已经添加了babel-plugin-import按需引入太多要全部引入，

import Vue from 'vue';

import Antd from 'ant-design-vue';//*注意这行
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import router from './router';
import store from './store';
import '@/plugins';
import '@/styles/index.scss';// global css


Vue.config.productionTip = false;
Vue.use(Antd);

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

这时需要修改babel.config.js文件，配置 babel-plugin-import

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  plugins: [
    [
      'import',
      必须把 libraryName: 'Antd'因为全局引入时import 后面时Antd名字需要保持一致。
       { libraryName: 'Antd', libraryDirectory: 'es', style: true },
     // { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
     //下面这一个时按需引入的
    ],
  ],
};

全局引入后再需要使用的组件里直接使用即可。 p1-jj.byteimg.com/tos-cn-i-t2…

<template>
  <div class="home">
    <div class="main">
      <div>
        <img src="../assets/image/logo.png">
        hahah
        <a-button type="primary">
          Button> hhh
        </a-button>
        enenen
      </div>
      <div>
        <template>
          <a-breadcrumb>
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
            <a-breadcrumb-item>An Application</a-breadcrumb-item>
          </a-breadcrumb>
        </template>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }],

    };
  },
  watch: {

  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
  },
};
</script>

<style lang='scss'>
.home{
  height:100%;
}
.main{
  max-width:1200px;
  margin:0 auto;
  min-width:70%;
  border:1px solid red;
  height:100%;
}
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>