ext项目与Vue项目整合

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>