vue.js - ElemeFE/element elementui在requirejs下的引用失败

问题描述

问 题

我尝试在requirejs下引用elementui的index.js未成功，使用方法如下：

require.config({

paths: {
"vuejs" : uiComponentPath "/scripts/vue/vue",
"element" : uiComponentPath "/scripts/vue/element/index",
"axios" : uiComponentPath "/scripts/vue/axios/axios",
"vueRouter" : uiComponentPath "/scripts/vue/vue-router/vue-router"
},
shim: {
'vuejs' : {
exports: 'vuejs'
},
'axios' : {
exports: 'axios'
},
'vueRouter' : {
deps:['vuejs'],
exports: 'vueRouter'
},
'element' : {
deps:['vuejs'],
exports: 'element'
}
}
});
require(['vueTest'], function (vueTest){
vueTest.init();
});

在vueTest.js中
define(['vuejs','axios','VueRouter','element'],
function(Vue,axios,VueRouter){
Vue.use(VueRouter);
var init = function(){
initVue();
}
return {
init : init
};
})

页面中el开头的元素未能识别，请问是使用方法有问题还是该组件不能支持在requirejs下使用？

解决方案

require.config({

    paths: {
        "vue"                     :     uiComponentPath + "/scripts/vue/vue",        
        "axios"                 :    uiComponentPath + "/scripts/vue/axios/axios",
        "vueRouter"             :    uiComponentPath + "/scripts/vue/vue-router/vue-router",
        "ELEMENT"                :    uiComponentPath + "/scripts/vue/element/index",
    }
});

require(['vueTest'], function (vueTest){
    vueTest.init();
});

因为index.js中模块名称已经定义为ELEMENT（大写）所以必须叫ELEMENT，不可以用其他名称

在引用时需要写 Vue.use(ELEMENT);

define(['jquery','vue','axios','vueRouter','ELEMENT'],
    function($,Vue,axios,VueRouter,ELEMENT){
Vue.use(VueRouter);
Vue.use(ELEMENT);
var init=function(){

};
return {
    init : init    
};                

})

这篇关于vue.js - ElemeFE/element elementui在requirejs下的引用失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！