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

作者:admin 2021-03-11 浏览:1841
导读: 一 、安装ant-design-vuenpm i --save ant-design-vue二.、引入1.完整引入import Vue from 'vue';import Antd from &...

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

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 = falsenew 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以上



作者:笑该动人d
链接:https://www.jianshu.com/p/329465408dec
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },};
  • less-loader版本大于6.0以上

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


转载请注明出处:admin,如有疑问,请联系(47379717)。
本文地址:http://ohoyoo.com/view/552.html

相关文章

添加回复:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。