Implementation method of accessing Ext framework by Vue project

Abstract

The application provides an implementation method for accessing an Ext framework by a Vue project, and comprises the following steps: creating an Ext configuration and loading a folder of an interface used; constructing a package of the Vue project; writing an Ext component generation template; generating a resource mapping construction file; calling the Ext component generation template, and generating a "component" that can be directly loaded by the Ext project through the Ext component generation template of the packaged resource file. In the process of packaging the Vue project, the component file that can be loaded by the Ext is constructed, the flexibility of the technical framework used by the developer is ensured, the development efficiency is ensured, and the access barriers of the technical frameworks of new and old projects are eliminated.

Description

Technical Field

[0001] This invention relates to the field of front-end related technology, specifically to a method for integrating a Vue project with the Ext framework. Background Technology

[0002] ExtJS is a JavaScript framework used to develop rich client-side AJAX applications. It's primarily used for creating front-end user interfaces and is independent of back-end technologies. Because of its native JavaScript capabilities, it was quite attractive before the rise of reactive programming…

[0003] The current trend in front-end development is reactive programming, represented by frameworks like React, Vue, and Angular, which significantly improve development efficiency. This raises the question: if an existing project is based on Ext and incompatible with these new frameworks, how to integrate Ext projects without altering the existing technical skills of the developers becomes a key research area for those in the know. Summary of the Invention

[0004] The purpose of this invention is to provide a method for integrating a Vue project with the Ext framework, in order to solve the problems existing in the background technology.

[0005] To achieve the above objectives, the present invention adopts the following technical solution:

[0006] A method for integrating the Ext framework into a Vue project includes the following steps:

[0007] Create a folder for Ext configuration and loading the interface to be used;

[0008] Package the Vue project;

[0009] Write an Ext component to generate a template;

[0010] Build the generated resource mapping file;

[0011] The Ext component generation template is called to generate a "component" that can be directly loaded by the Ext project from the packaged resource files.

[0012] In some embodiments, building the generated resource mapping file in the Ext project includes writing a main mapping file in the Ext project, which is included in the index.html file of the Ext project. The function of the index.html file is to load the resource mapping file generated by the packaging and building of the Vue project.

[0013] In some embodiments, creating a folder for the interfaces used for Ext configuration and loading includes: creating a separate folder for the interfaces, where the subfiles in the folder are the names of all interfaces or "component names", for use by Ext configuration and loading.

[0014] In some embodiments, the packaging of the Vue project includes: based on the customized implementation of the Vue project, using the webpack packaging tool to package the Vue project implementation by component name to generate resource files; and placing the resource mapping relationship of all "interfaces" in the Vue project in a unified sub-mapping file.

[0015] In some embodiments, the step of writing an Ext component generation template includes providing the complete lifecycle of an Ext component, dynamically loading Vue's packaged resource files using the encapsulation method loadScript, and generating a View.js file.

[0016] In some embodiments, the step of calling the Ext component generation template to generate a "component" that can be directly loaded by the Ext project from the packaged resource file includes: passing the resource file to the Ext component generation template, and the Ext component generation template automatically calling the lifecycle functions of the Ext component to generate a "component" that can be directly loaded by the Ext project, thereby realizing the conversion from Vue project code to Ext component.

[0017] The beneficial effects of the method for integrating a Vue project with the Ext framework provided in this application include, but are not limited to:

[0018] By applying the method described in this application, business development can be carried out using the Vue project framework, and then integrated into the Ext project, which speeds up the development efficiency of front-end developers and unifies the display effect of the interface without being limited by the technology framework. Attached Figure Description

[0019] Figure 1 This is a flowchart of a method embodiment of the invention. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0021] Conversely, this application covers any substitutions, modifications, equivalent methods, and schemes made within the spirit and scope of this application as defined in the claims. Furthermore, to provide the public with a better understanding of this application, certain specific details are described in detail below. However, this application can be fully understood by those skilled in the art even without these detailed descriptions.

[0022] The following will combine Figure 1 This application provides a detailed description of an implementation method for integrating a Vue project with the Ext framework, as described in the embodiments of this application. It is worth noting that the following embodiments are merely illustrative of this application and do not constitute a limitation thereof.

[0023] Ext is a pure JavaScript project framework that possesses all the native capabilities of JavaScript. Therefore, it can extend functionality by dynamically loading resource files outside of Ext.

[0024] This application, based on the loading and building principles of Ext projects and its provided APIs, intercepts and optimizes the building process of Vue projects. It adds file loading and transformation methods, changes the mounting method of Vue projects, and "injects" the packaged resource files into the constructor of the Ext component, generating an Ext "component," which is then loaded and processed by Ext. The detailed implementation scheme is as follows:

[0025] like Figure 1 As shown, a method for integrating the Ext framework into a Vue project includes the following steps:

[0026] Step 1: Custom implementation of a Vue project. Each independent interface requires separate registration, providing a unified registration method. The component definitions and logic imports related to the interface functionality are the same as in normal Vue project development. Therefore, a separate folder for interfaces needs to be created. The subfiles in this folder will be named after all interfaces or "component names," for Ext configuration and loading.

[0027] Step 2: Implement the Vue project's build process: Based on a customized implementation of the Vue project, use the webpack bundling tool to bundle the Vue project by component name, generating resource files (each component name contains bundled JS and CSS). Use webpack and gulp for bundling. First, based on the installed interface, generate the corresponding original JS and CSS files. Second, based on the files generated in the first step, use Ext component templates to dynamically generate Ext component files; these files are the original files loaded by the Ext project. Finally, place the resource mappings of all "interfaces" in this Vue project into a single sub-mapping file.

[0028] Step 3: Write an Ext component generation template. This template provides the complete lifecycle of Ext components and provides a wrapper method loadScript, which dynamically loads the Vue packaged resource files and generates the View.js file.

[0029] Step 4: In the Ext project, create a main mapping file. This file is included in the Ext project's index.html file. Its function is to load resource mapping files generated by the Vue project's build process. Multiple mapping files can be used. This file is dynamically generated during the build process and is a file reference mapping table containing the mapping relationships of all Vue project files for the Ext project to call and load. The existence of this mapping file can further expand the use of the technology framework.

[0030] Step 5: Call the Ext component generation template. This template is a general component definition class that provides all the elements for dynamically registering components, including all lifecycle functions of Ext components, the `loadScript` method for dynamically loading resource files, and callback functions adapted to the Vue lifecycle. In the final stage of packaging a Vue project, components need to be dynamically generated. The process involves passing the resource files to the template, which will automatically call the Ext component lifecycle functions to generate "components" that the Ext project can directly load, thus realizing the conversion from Vue project code to Ext components.

[0031] After the above steps, the process of loading a Vue project into an Ext project becomes: Ext procedure → main mapping file → View.js file → sub-mapping file → Vue bundled file, forming a complete call chain.

[0032] In addition, there can be multiple Vue projects because the main mapping file can load multiple sub-mapping files. This approach is not limited to any front-end framework, as long as the packaged code is loaded into the View.js file through the Ext component template, it is possible to load an Ext project based on a framework project.

[0033] This application's technical solution addresses the issue of integrating Vue projects into Ext projects. By rewriting the Ext loading process and customizing the Vue project's build process, it generates raw files and mapping files according to certain rules. These files can be dynamically expanded into Ext component-based files for dynamic loading by the Ext project. The core idea is to build Ext-loadable component files during the Vue project's build process, ensuring both flexibility and efficiency for developers using the technology framework, thereby eliminating barriers to integrating new and old project technology frameworks.

[0034] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for integrating the Ext framework into a Vue project, characterized in that, Includes the following steps: Create a folder for Ext configuration and loading the interface to be used; Package the Vue project; Write an Ext component to generate a template; The process involves writing Ext component generation templates; This includes providing a complete lifecycle for Ext components by generating templates for Ext components, and dynamically loading pre-packaged Vue resource files using the encapsulated method loadScript to generate the View.js file; Build the generated resource mapping file; The Ext component generation template is called to generate a "component" that can be directly loaded by an Ext project from the packaged resource files. The generated resource mapping file; This includes writing a main mapping file in the Ext project, which is included in the Ext project's index.html file. The function of the index.html file is to load the resource mapping files generated by the bundled build of the Vue project.

2. The method for integrating the Ext framework into a Vue project according to claim 1, characterized in that, The creation of the folder for the interfaces used for Ext configuration and loading includes: creating a separate folder for each interface, where the subfiles are named after all interfaces or "component names", for use in Ext configuration and loading.

3. The method for integrating the Ext framework into a Vue project according to claim 1, characterized in that, The packaging of the Vue project includes: based on the customized implementation of the Vue project, using the webpack packaging tool to package the Vue project implementation by component name to generate resource files; and placing the resource mapping relationship of all "interfaces" in the Vue project in a unified sub-mapping file.

4. The method for integrating the Ext framework into a Vue project according to claim 1, characterized in that, The process of calling the Ext component generation template generates a "component" that can be directly loaded by the Ext project by passing the packaged resource files to the Ext component generation template. This includes: passing the resource files to the Ext component generation template, and the Ext component generation template automatically calling the lifecycle functions of the Ext component to generate a "component" that can be directly loaded by the Ext project, thereby realizing the conversion from Vue project code to Ext component.

Images