1.需求：
原有的ext項目需要與當前的Vue項目進行整合
2.需要考慮：
①權限認證 ②接口權限 ③全局樣式
整合進來后上述問題幾乎不會發生
3.因為很多原先的ext方法需要在Vue項目中使用，所以需要注意變量作用域問題需要改為全局變量，變量名需要生僻避免沖突
4.原先ext項目只有一個HTML文件將factory.html的script style 布局標簽 拷貝到index.html中注意順序
5. 老項目中的左側樹不需要顯示，GudiePanel.js中代碼改為
this.items = [
// fristGuidePanel,//注釋該行左側的樹隱藏
secondGuidePanel
];
6.原先左側樹點擊事件顯示對應的列表，修改成Vue形式的菜單，點擊左側菜單的時候進入到指定的路由在路由頁面中的mounted鈎子函數中調用原先ext左側菜單的click方法
7.每個路由頁面都需要一個容器用來掛在ext的節點
<template>
<div style="height: 100%">
<div :id="extRoot"></div>
</div>
</template>
<script>
export default {
name: 'taskMonitoring',
data() {
return {
extRoot: 'extRoot'
};
},
methods: {
init() {
const vm = this;
vm.elc = new Ext.Panel({
renderTo: 'extRoot',
layout: 'fit',
border: false
});
vm.elc.add([guidePanel]);
vm.elc.doLayout();
if(timeIntervalByTaskControl!=""){
clearInterval(timeIntervalByTaskControl);
timeIntervalByTaskControl="";
}
if(moduleViewInterval!=""){
clearInterval(moduleViewInterval);
moduleViewInterval="";
}
},
generateTrans: generateTrans
},
mounted: function() {
this.init();
this.generateTrans(secondGuidePanel);
}
};
</script>