problem description

transform the front end of a project, the project is very large, now look at the source code plus attachments have more than 500 megabytes (including svn files), front-end pages also have hundreds. I tried to build a front-end project based on webpack with vue cli

vue init webpack myproject

write a shelf in elementui, as shown in the following picture.

tabExt3.0

, the front and back ends are not developed separately, they all write something in the front end and write something in the background. I don"t know what to do, whether to introduce Ext into the front-end project or how to directly call the code written in Ext. Please provide an idea

the environmental background of the problems and what methods you have tried

• introduce the code to load the page before Ext, is rewritten in the front-end project
  I think the Ext source code does not follow the strict mode of ES5, it will report an error as soon as it is run, and there should be a dependency between ext-base.js and ext-all.js, if Ext needs to be introduced. How should the introduction method be written
• I don"t know what else to do.

related codes

• Code that uses dynamic components in tabs components

  showTab = function() {
    var tab = null;
    //Tab    
    if (tab == null) {
      var loadPanelMethod = hasLoaded[loadingUrl].fn;
      var newPanel = loadPanelMethod();
      var tabObject = new Ext.Panel({
        id: item.id,
        layout: "fit",
        title: item.text,
        iconCls: "othertab",
        items: [newPanel],
        closable: true,
        autoScroll: true
      });
      tab = mainTabPanel.add(tabObject).show();
      newPanel.doLayout();
    }
    mainTabPanel.setActiveTab(tab);
    isLoading = false;
    mainTabPanel.body.unmask();
  }

excuse me

has not been exposed to this kind of engineering front-end development before, has always been a rookie writing java, the front-end knowledge is still at the ES3 level, and some problems are not clearly described or misused.