CN115857999A - Method and system for obtaining micro front-end system architecture based on vue system architecture transformation - Google Patents
Method and system for obtaining micro front-end system architecture based on vue system architecture transformation Download PDFInfo
- Publication number
- CN115857999A CN115857999A CN202211435498.5A CN202211435498A CN115857999A CN 115857999 A CN115857999 A CN 115857999A CN 202211435498 A CN202211435498 A CN 202211435498A CN 115857999 A CN115857999 A CN 115857999A
- Authority
- CN
- China
- Prior art keywords
- sub
- application
- configuration file
- menu
- applications
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention discloses a method and a system for obtaining a micro front-end system architecture by modifying a vue-based system architecture, wherein a vue-based management system is used as a main application; compiling source codes of the sub-applications, and throwing out component references corresponding to the menus in the sub-application program interfaces; writing a packaging configuration file, and pointing the reference of the special identifier in the source code of the sub-application to the mounted public component or method on the window object in the main application; the method comprises the steps that a reference to a vue frame in source codes of a sub application points to a vue frame reference mounted on a window object in a main application; packing according to the configuration file and the packing configuration file to obtain a target file; registering a menu and determining the sub-application to which the menu belongs; the menu management information is configured such that, in the code execution phase, the main application loads the target file of the sub-application and executes it. The invention independently develops, independently packs and independently deploys the service function source codes of part of menus to form the sub-applications.
Description
Technical Field
The invention relates to the technical field of front-end development, in particular to a method for transforming a vue-based management system architecture into a micro front-end architecture.
Background
The existing project is a vue-based background management system, a vue front-end development framework is adopted, and a vue component is bound to each menu in the system. When a user accesses a menu, the corresponding vue component is rendered into the menu container.
The front-end project only has one html file, and the front-end project with all functions realized through javascript is called single-page application. And each html has a window object which is a built-in global object of the browser, and the attributes on the window object are accessible to all javascript scripts loaded in the html file.
The background management system based on vue is a single-page application, and a main application is a method for mounting in a window and can be accessed in a sub-application. When the existing project is used for business function development, a public component and a public method are used, the public component and the public method are abstractions of codes with high reuse rate, and can be directly called when the business function is needed without repeated development. Common components and common methods are collectively referred to as common code. The project service function of the system is presented in the system in the form of a menu, and developers create a new menu through a menu management function module and configure a corresponding function source code relative path to finish the binding of the menu and the service function code. The current development method of the existing item is a single method, and all source codes in the single method item are in the same development catalog. The deployment file is generated by packaging the same packaging tool, the code amount is increased along with the increase of the number of the dishes, and the packaging process becomes overlong and even crashes. Meanwhile, when multiple developers cooperate to complete system development, codes need to be combined, and debugging time is increased.
The micro front end is a front end code organization method similar to micro services, front end codes are divided into main applications and sub-applications, the main applications serve as project entrances and are responsible for activation and destruction of the sub-applications, and the sub-applications are independently developed, independently packaged and independently deployed.
After the existing project is reformed into the micro front end, if the public code is copied to the development directory of each sub-application, when the public code is modified, the modification needs to be carried out under each sub-application, which is not beneficial to code reuse.
Therefore, how to implement a method for transforming the vue-based system architecture into the micro front-end architecture is a technical problem to be solved at present.
Disclosure of Invention
The invention aims to provide a method for modifying a system architecture into a micro front-end architecture aiming at a vue-based system.
In order to achieve the technical purpose, the invention adopts the following technical scheme.
In a first aspect, the present invention provides a method for adapting a vue-based system architecture to a micro front-end architecture, comprising:
treating the vue-based system as a master application;
writing source codes of the sub-applications, and throwing references of components corresponding to the menus in a sub-application program interface;
writing a packaging configuration file of the sub-application, and pointing the reference of the special identifier in the source code to a mounted public component or public method on a window object in the main application; the reference of the vue frame in the source code points to the vue frame reference mounted on the window object in the main application; writing a configuration file of the sub-application, wherein the configuration file comprises a target file path; packing according to the configuration file and the packing configuration file of the sub-application to obtain a target file of the sub-application;
registering a menu and determining the sub-application to which the menu belongs; and configuring the menu management information so that in the code execution stage, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file.
Further, the configuration file also includes dependency information of the sub-applications, and the method for configuring the dependency includes: configuring an identification of a dependent sub-application; and if the dependent sub-application does not depend on other sub-applications, configuring a target file path of the dependent sub-application, and if the dependent sub-application configures the dependency of the dependent sub-application in a configuration file of the dependent sub-application, configuring a configuration file path of the dependent sub-application, so that the dependent sub-application loads the dependent sub-application according to the identifier of the dependent sub-application and the target file path or the configuration file path of the dependent sub-application.
Further, in the code execution phase, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file, including:
a user accesses a certain menu and loads a configuration file of a sub-application corresponding to the menu according to the menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Further, in the code execution phase, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file, including:
a user accesses a certain menu and loads a configuration file of the sub-application according to the menu management information;
determining whether the sub-application depends on other sub-applications according to the configuration file; if other sub-applications are depended on, loading the depended sub-applications, and mounting components and methods thrown out by the depended sub-application program interfaces on the attributes of the window object and the unique identifiers of the sub-applications in one-to-one correspondence, so that the methods and the components thrown out by the depended other sub-application program interfaces in the sub-applications are used through special identifiers;
the main application loads a target file of the sub-application according to the configuration file of the sub-application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Further, the method further comprises: developing a new common component or a common method into a common library sub-application; the common library sub-application program interface throws out references to common components or common methods;
when other sub-applications need to use new common components or common methods, the dependencies on the common library sub-application need to be configured in the sub-application.
Further, a scaffold is used for rapidly generating basic source codes of the sub-applications, wherein the basic source codes comprise configuration files of the sub-applications, packaging configuration files of the sub-applications, source codes of the sub-applications and a main application deployment package; and running the main application deployment package when the sub-applications are debugged, creating a sub-application menu to be debugged, and debugging the source codes of the sub-applications.
In a second aspect, the present invention further provides a micro front-end system obtained by transforming a vue-based system architecture, including: the system comprises a main application and a sub-application, wherein the main application comprises a menu registration module and a loading module;
the menu registration module is used for taking the vue-based system as a main application; writing source codes of the sub-applications, and throwing references of components corresponding to the menus in a sub-application program interface; writing a packaging configuration file of the sub-application, and pointing the reference of the special identifier in the source code to a mounted public component or public method on a window object in the main application; the reference of the vue frame in the source code points to the vue frame reference mounted on the window object in the main application; writing a configuration file of the sub-application, wherein the configuration file comprises a target file path; packing according to the configuration file and the packing configuration file of the sub-application to obtain a target file of the sub-application; registering a menu and determining the sub-application to which the menu belongs; configuring menu management information;
and the loading module is used for loading the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information by the main application at the code execution stage, and loading and executing the target file of the sub-application according to the configuration file.
Further, in the code execution phase, the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file, and executes the object file, including:
a user accesses a certain menu and loads a configuration file according to menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the corresponding component of the menu, acquiring the reference of the corresponding name component thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Further, the configuration file further includes dependency information of the sub-applications, and the method for configuring the dependency includes: configuring an identification of a dependent sub-application; and if the dependent sub-application does not depend on other sub-applications, configuring a target file path of the dependent sub-application, and if the dependent sub-application configures the dependency of the dependent sub-application in a configuration file of the dependent sub-application, configuring a configuration file path of the dependent sub-application, so that the dependent sub-application loads the dependent sub-application according to the identifier of the dependent sub-application and the target file path or the configuration file path of the dependent sub-application.
Furthermore, in the code execution phase, the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file, and executes the object file, including:
a user accesses a certain menu and loads a configuration file of the sub-application according to the menu management information;
determining whether the sub-application depends on other sub-applications according to the configuration file; if other sub-applications are depended on, loading the depended sub-applications, and mounting components and methods thrown out by the program interfaces of the depended sub-applications on the attributes of the window objects and the unique identifiers of the sub-applications in one-to-one correspondence, so that the methods and the components thrown out by the depended other sub-applications in the sub-applications are used through special identifiers;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
The invention has the following beneficial technical effects: the method independently develops, independently packs and independently deploys the service function source codes of part of menus to form sub-applications. And configuring a sub-application deployment file path in menu management to finish the binding of the menu and the service function.
The background management system based on vue of the invention changes the system architecture of the existing project into a micro front end scheme, considers the problems of development and use of public codes, and throws out the public codes in main application for sub-applications for the public codes developed by the existing system because the existing system codes are used as main application codes in the micro front end.
According to the invention, partial menu source codes are combined into one sub-application, and the sub-applications are independently developed, independently packaged and independently deployed. The whole system is formed by combining a plurality of sub-applications. When the service function is increased, the menu is increased, and the number of sub-applications is increased accordingly. Because the single sub-application code is small in size, and the sub-applications are independently packaged and deployed, the packaging time of the single sub-application cannot be increased due to the increase of the service function.
For newly developed common code, new common code is not developed in the host application because modifications to the host application code may cause frequent updates to the system version. The common code is developed into one or more sub-applications, and other sub-applications rely on the common code sub-applications and use their thrown components or methods, reducing modifications to the main application code.
Drawings
FIG. 1 is a block diagram of a micro front-end architecture according to an embodiment of the present application
FIG. 2 is a flow chart illustrating the execution of code provided by an embodiment of the present application;
fig. 3 is a flowchart illustrating operations of a developer according to an embodiment of the present disclosure.
Detailed description of the invention
The invention is described in further detail below with reference to the following drawings and detailed description.
Example 1
The method for obtaining the micro front-end system architecture based on vue system architecture transformation comprises the following steps:
taking the vue-based management system as a main application; compiling a sub-application source code, and throwing out component references corresponding to menus in a sub-application program interface; such as: writing a sub-application source code, exposing a program interface in a sub-application source code entry file, throwing out component references corresponding to the menu in the program interface, and expressing the component references in a key-value pair mode. Example (c): the program interface is { menu: { Menu A: menu a component reference, menu b: menu B component reference }, the Menu is configured to: and the fixed prefix/MenuA/AppPath AppPath is used as a path for deploying the child application.
Writing a packaging configuration file, and pointing the reference of the special identifier in the source code of the sub-application to the mounted public component or public method on the window object in the main application; the method comprises the steps that a reference to a vue frame in source codes of a sub-application points to a vue frame reference mounted on a window object in a main application, and the main application uses the same vue frame reference;
writing a configuration file, wherein the configuration file comprises a target file path;
and packaging according to the configuration file and the packaging configuration file to obtain the target file of the sub-application.
Registering a menu and determining a sub-application to which the menu belongs;
and configuring the menu management information so that in the code execution stage, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file.
Specifically, optionally, the sub-application dependent configuration is further included in the sub-application configuration file.
In a specific embodiment, some methods, such as a hook method of a life cycle, can be thrown in a program interface of the sub-application, and a user-defined function can be written by using the methods; this is prior art and is not overly described in this application.
The embodiment modifies the existing system into a micro front-end scheme, the codes of all sub-applications are independent, but some common components and common methods are needed to be referred by most of the sub-applications, and if one copy of the codes of the components and methods is copied in each sub-application, the problem that the common codes in each sub-application are inconsistent can be caused, and the code volume of the sub-applications can be increased. Therefore, in the embodiment, a reference method based on the existing common components and common methods is provided. Common components developed for existing systems can be registered as global vue components, and the sub-application and the main application use the same vue reference, so that the sub-application can directly use the global vue component registered by the main application. The common components and common methods can also be mounted on the window object, and the sub-applications can also use the common components and common methods through packaging tool configuration.
The original monomer application is changed into micro front-end application, and the pressure of packaging and multi-person development is reduced. The existing system is directly used as a main application source code, a menu loading part is changed, the source code of the developed public component and method is not moved, only throwing processing is carried out, the source code of the existing system is slightly modified, and the development cost is reduced. The sub-application and the main application use the vue technology stack, so that the sub-application can use the existing public components, and the workload is reduced. The sub-application basic codes are generated through the scaffold, so that the work of copying and pasting by developers is reduced, and the development experience is improved.
Example 2
Based on embodiment 1, in this embodiment, in the code execution stage, the main application loads the configuration file of the sub application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub application according to the configuration file, and executes the object file, including:
in the code execution stage, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file, and the code execution method comprises the following steps:
a user accesses a certain menu and loads a configuration file according to menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
using the mounted public component and method on the window object in the main application through the special identification in the sub application; and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Example 3
In this embodiment, considering an example that a sub application depends on other sub applications, on the basis of embodiment 1, the method further includes: the configuration file also comprises dependency information of the sub-applications, and the method for configuring the dependency comprises the following steps:
configuring an identification of a dependent sub-application; and if the dependent sub-application does not depend on other sub-applications, configuring a target file path of the dependent sub-application, and if the dependent sub-application configures the dependency of the dependent sub-application in a configuration file of the dependent sub-application, configuring a configuration file path of the dependent sub-application, so that the dependent sub-application loads the dependent sub-application according to the identifier of the dependent sub-application and the target file path or the configuration file path of the dependent sub-application.
The master application will mount the dependency thrown method on the attribute named by the name of the dependent child application. The operation flow of creating the sub-application by the specific developer is shown in fig. 3, which includes:
creating a sub-application with a scaffold;
filling in a sub-application path and a target file path;
generating a basic source code of the sub application;
determining whether other sub-applications are relied on, and if so, configuring dependence information; if not, starting the sub-application debugging mode;
registering a menu in menu management, developing and debugging a sub-application source code, and packaging to generate a target file;
and deploying the target file to the server.
Example 4
Based on embodiment 3, a code execution flow provided by this embodiment is as shown in fig. 2, where in a code execution stage, a main application loads a configuration file of a sub application corresponding to a menu according to configuration information in menu management information, and loads and executes an object file of the sub application according to the configuration file, including:
a user accesses a certain menu, and the main application loads a configuration file of the sub-application according to configuration information in the menu management information;
determining whether the configuration file has dependent configuration, if so, loading the dependent sub-application, and mounting components and methods thrown out by the dependent sub-application on the attributes of the window object and the unique identifier of the sub-application in one-to-one correspondence, so that the methods and components thrown out by other dependent sub-applications in the sub-application are used through special identifiers;
loading a target file according to a target file path in the configuration file;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
In the embodiment, the existing system code is automatically used as the main application code, when a user accesses a menu, the main application code manages configuration information through the menu, a configuration file of a sub-application is loaded firstly, whether other sub-applications are relied on in the configuration is checked, if so, the relied sub-application is loaded firstly, then the sub-application code is loaded according to a target file path in the configuration file, the vue component quote configured in the menu management is executed and obtained, and the component is rendered to realize a service function.
In this embodiment, the public component and the public method are mounted on the window, and may be mounted under different special naming attributes of the window according to the classification, and the public component may also be registered as a global component.
If the sub-application depends on other sub-applications, the main application loads the depended sub-application first, and the components and the methods thrown out by the depended sub-application are mounted on the window object and the attributes corresponding to the unique identifiers of the sub-applications one by one.
Example 5
On the basis of the above embodiments, the embodiment adds a reference method for newly developed common components and common methods to meet new requirements of projects; the method comprises the following steps: developing a new public component or a public method into a public library sub-application; the public library sub-application throws out references to public components or public methods;
when other sub-applications need to use a new common component or a common method, the dependency on the common library sub-application needs to be configured in the sub-application, and the dependent sub-application throwing method is mounted to the window object.
For newly developed common components and common methods, this can be achieved by developing common library sub-applications. The method provided by the embodiment develops the common component or the common method into a common library sub-application, the sub-application throws out the reference of the common component or the common method, when other sub-applications need to use the common code, the dependency on the common library sub-application needs to be configured in the sub-application, when the main application loads the sub-application code, the dependent sub-application is loaded first if the configuration is checked first and the dependency on other sub-applications is found, and the method thrown out by the dependent sub-application is mounted to the window object, so that the sub-applications can use the dependency.
In particular embodiments, a scaffold program may be developed that integrates the configuration files, example code, and master application deployment package formation templates of the child applications into the scaffold program. And a developer installs a scaffold program in a local operating system, generates a template-based sub-application basic source code locally through a command provided by the scaffold program, and develops on the basis of the template-based sub-application basic source code.
The following specifically describes an operation flow of a developer when obtaining a micro front-end system architecture based on vue system architecture transformation, with reference to the attached drawing 3 of the specification.
(1) And configuring menu management information, and loading the sub-applications and the dependency thereof and rendering by the main application according to the configuration information of the sub-applications in the menu management information.
In the menu management configuration, the configuration information format of the sub-application is as follows: fixed prefix/vue component name/sub-application profile path. Example (c): and $ apps/SomeMenu/ApppPath. The fixed prefix is used for identifying the attribute to be set; the existing system code automatically becomes a main application code, when a user accesses a menu, the main application loads a configuration file of which AppPath/config.json is a sub-application, whether other sub-applications are depended in the configuration file is checked, if so, the depended sub-applications are loaded, and the code reference thrown by the application is hung on a window object. And then, loading and executing the sub application target file according to the target file path in the configuration file of the sub application, acquiring the component corresponding to the vue component name in the menu management configuration, rendering the component in the main application, and completing the service function.
(2) Existing system common components are registered as global vue components. And the public component and the public method are mounted under different window special naming attributes according to the classification. The effect of the special identifier is to separate the reference from the local development catalog (i.e. the development catalog of the child application) in the source code for the future from the main application and the reference from the local development catalog, or the reference of the child application;
for example: all codes under the src/utils path in the source codes of the existing system are mounted under window _ MICROAPP _ src _ utils _, the sub-application can use a specific method through importSomemethod from '@ main/utils/Somemethod'. Where @ main/belongs to a special identifier that identifies the public methods or public components that are all from the master application with this beginning. If the sub-application depends on other sub-applications, the main application loads the depended sub-application first, and the components and the methods thrown out by the depended sub-application are mounted on the attributes of the window object and the unique identifiers of the sub-applications in one-to-one correspondence. For example, the sub-application path AppPath is used as a sub-application unique identifier. The dependency of the sub-application is mounted on the window _ MICROAPP _ deps _ Apppath _, and the sub-application can use the dependency method through import Somemethod from '@ deps/DepsName/SomeMethod', wherein the DepsName is the dependency identification in the dependency configuration.
(3) Writing a sub-application packaging configuration file, and pointing the reference of the special identifier in the source code of the sub-application to a public method mounted on a window object in the main application. And packaging the sub-applications to generate a target file, and writing a configuration file comprising the dependency configuration of the sub-applications and a target file path.
The sub-application directly uses the global component registered by the main application. Packing the configuration file requires pointing the child application's vue reference onto the window _ MICROAPP _ vue _, the host application vue reference is also mounted on the window _ MICROAPP _ vue _, so that the child application and the host application use the same vue reference.
The sub-applications use the main application public method through special identification, for example: import Somemethod from '@ main/utils/Somemethod'. The packaging configuration file requires that all references beginning with @ main/utils/point onto the window _ MICROAPP _ src _ utils _ object. Specifically, the reference of @ main/utils/SomeMethod corresponds to the read window _ MICROAPP _ src _ utils _.
Json configures the deps attribute as an array in a configuration file config of the sub-application. Each array element is a dependency, and each array element includes two attributes: name and path.
The name is the name of the dependency that the host application will mount the method that the dependency throws on the property named by the name on window _ MICROAPP _ deps _ AppPath _ so that the child application can use the dependency by name. Path is the path of the dependency target file, and the main application loads the dependency through the attribute.
The method of throwing out other sub-applications which depend on the sub-applications through special identification is as follows: import Somemethod from '@ deps/DepsName/Somemethod'. The packaging configuration file requires that all references that would start with @ deps/point onto the window _ MICROAPP _ deps _ Apppath _ object. The DepsName is the name attribute name at the time of dependent configuration. The AppPath is a sub-application path and is used as a unique sub-application identifier, and the introduction of the AppPath can prevent the sub-application from referring to the homonymy dependence of other sub-applications. Specifically, the reference of @ deps/depssName/SomeMethod corresponds to the read window _ MICROAPP _ deps _ Apppath _.
(4) And developing a scaffold program, and integrating the configuration file, the example code and the main application deployment package forming template of the sub-application into the scaffold program. And a developer installs a scaffold program in a local operating system, generates a template-based sub-application basic source code locally through a command provided by the scaffold program, and develops on the basis of the template-based sub-application basic source code.
The scaffold program creates a command line command in the operating system, named cli for example, and the developer executes clicreatedemo, which creates a demo folder under the current directory. While the command line asks the sub-application path and the target file path. After the developer fills in, the command copies the basic source code composed of the example code and the main application deployment package to the demo folder, and generates a config. The local packaging tool reads the information of the configuration file, names the packaged target file by using the name of the target file in the configuration file, and places the target file into a corresponding directory by using the sub-application path as a directory structure. Because the basic source code also comprises the main application deployment package, the sub-application can be debugged in a real main application environment in a debugging mode, and the components and the method provided by the main application can be used.
Example 6
As shown in fig. 1, the present embodiment provides a micro front-end system obtained by transforming a vue-based system architecture, including: a main application and a sub-application;
the main application is a vue-based management system; the main application comprises a menu registration module and a loading module;
the menu registration module is used for taking the vue-based system as a main application; compiling source codes of the sub-applications, and throwing references of components corresponding to the menus in a sub-application program interface; writing a packaging configuration file of the sub-application, and pointing the reference of the special identifier in the source code to the mounted public component or public method on the window object in the main application; the reference of the vue frame in the source code points to the vue frame reference mounted on the window object in the main application; writing a configuration file of the sub-application, wherein the configuration file comprises a target file path; packing according to the configuration file and the packing configuration file of the sub-application to obtain a target file of the sub-application; registering a menu and determining the sub-application to which the menu belongs; configuring menu management information;
and the loading module is used for loading the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information by the main application at the code execution stage, and loading and executing the target file of the sub-application according to the configuration file.
In the code execution stage, the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the target file of the sub-application according to the configuration file and executes the target file, and comprises:
a user accesses a certain menu and loads a configuration file according to menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Example 7
Based on embodiment 6, in the system provided in this embodiment, the configuration file further includes dependency information of the sub-application, and the method for configuring the dependency includes: and configuring the name identification of the sub-application dependent on the sub-application and the target file path of the dependent sub-application.
Further, in the code execution phase, the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file, and executes the object file, including:
a user accesses a certain menu and loads a configuration file according to menu management information;
determining whether the sub-application depends on other sub-applications according to the configuration file; if other sub-applications are depended on, loading the depended sub-applications, and mounting components and methods thrown out by the depended sub-applications on the attributes of the window objects in one-to-one correspondence with the unique identifiers of the sub-applications, so that the methods and the components thrown out by the depended other sub-applications are used in the sub-applications through special identifiers;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While the present invention has been described with reference to the embodiments shown in the drawings, the present invention is not limited to the embodiments, which are illustrative and not restrictive, and it will be apparent to those skilled in the art that various changes and modifications can be made therein without departing from the spirit and scope of the invention as defined in the appended claims.
Claims (10)
1. A method for adapting a vue-based system architecture to a micro front end architecture, comprising:
taking the vue-based system as a master application;
writing source codes of the sub-applications, and throwing references of components corresponding to the menus in a sub-application program interface;
writing a packaging configuration file of the sub-application, and pointing the reference of the special identifier in the source code to a mounted public component or public method on a window object in the main application; the reference of the vue frame in the source code points to the vue frame reference mounted on the window object in the main application; writing a configuration file of the sub-application, wherein the configuration file comprises a target file path; packing according to the configuration file and the packing configuration file of the sub-application to obtain a target file of the sub-application;
registering a menu and determining the sub-application to which the menu belongs; and configuring the menu management information so that in the code execution stage, the main application loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file.
2. The method for transforming vue-based system architecture into micro front-end architecture according to claim 1, wherein the configuration file further includes dependency information of the sub-applications, and the method for configuring the dependency is as follows: configuring an identification of a dependent sub-application; and if the dependent sub-application does not depend on other sub-applications, configuring a target file path of the dependent sub-application, and if the dependent sub-application configures the dependency of the dependent sub-application in a configuration file of the dependent sub-application, configuring a configuration file path of the dependent sub-application, so that the dependent sub-application loads the dependent sub-application according to the identifier of the dependent sub-application and the target file path or the configuration file path of the dependent sub-application.
3. The method for adapting a vue-based system architecture into a micro front-end architecture according to claim 1, wherein in the code execution phase, the main application loads the configuration files of the sub-applications corresponding to the menu according to the configuration information in the menu management information, loads the object files of the sub-applications according to the configuration files and executes them, comprising:
a user accesses a certain menu and loads a configuration file of a sub-application corresponding to the menu according to the menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the corresponding component of the menu, acquiring the reference of the corresponding name component thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
4. The method as claimed in claim 1, wherein in the code execution phase, the main application loads the configuration file of the sub application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub application according to the configuration file, and executes the object file, and the method comprises:
a user accesses a certain menu and loads a configuration file of the sub-application according to the menu management information;
determining whether the sub-application depends on other sub-applications according to the configuration file; if other sub-applications are depended on, loading the depended sub-applications, and mounting components and methods thrown out by the depended sub-application program interfaces on the attributes of the window object and the unique identifiers of the sub-applications in one-to-one correspondence, so that the methods and the components thrown out by the depended other sub-application program interfaces in the sub-applications are used through special identifiers;
the main application loads a target file of the sub-application according to the configuration file of the sub-application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
5. The method of adapting a vue-based system architecture into a micro front end architecture of claim 1, wherein the method further comprises: developing a new common component or a common method into a common library sub-application; the common library sub-application program interface throws out references to common components or common methods;
when other sub-applications need to use new common components or common methods, the dependencies on the common library sub-application need to be configured in the sub-application.
6. The method for adapting a vue-based system architecture into a micro front-end architecture according to claim 1, wherein a scaffold is used to quickly generate sub-application base source code, including a configuration file of a sub-application, a packaged configuration file of a sub-application, source code of a sub-application, and a main application deployment package; and running the main application deployment package when the sub-applications are debugged, creating a sub-application menu to be debugged, and debugging the source codes of the sub-applications.
7. The little front-end system that system architecture transformation obtained based on vue, characterized by, includes:
the system comprises a main application and a sub-application, wherein the main application comprises a menu registration module and a loading module;
the menu registration module is used for taking the vue-based system as a main application; writing source codes of the sub-applications, and throwing references of components corresponding to the menus in a sub-application program interface; writing a packaging configuration file of the sub-application, and pointing the reference of the special identifier in the source code to a mounted public component or public method on a window object in the main application; the reference of the vue frame in the source code points to the vue frame reference mounted on the window object in the main application; writing a configuration file of the sub-application, wherein the configuration file comprises a target file path; packaging according to the configuration file and the packaging configuration file of the sub-application to obtain a target file of the sub-application; registering a menu and determining the sub-application to which the menu belongs; configuring menu management information;
and the loading module is used for loading the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information by the main application at the code execution stage, and loading and executing the target file of the sub-application according to the configuration file.
8. The vue-based system architecture transformation-derived micro-front-end system according to claim 7, wherein the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file in the code execution phase, and comprises:
a user accesses a certain menu and loads a configuration file according to menu management information;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
9. The vue-based system architecture transformation-derived micro-front-end system according to claim 7, wherein the configuration file further includes dependency information of the sub-applications, and the method for configuring the dependency is as follows: configuring an identification of a dependent sub-application; and if the dependent sub-application does not depend on other sub-applications, configuring a target file path of the dependent sub-application, and if the dependent sub-application configures the dependency of the dependent sub-application in a configuration file of the dependent sub-application, configuring a configuration file path of the dependent sub-application, so that the dependent sub-application loads the dependent sub-application according to the identifier of the dependent sub-application and the target file path or the configuration file path of the dependent sub-application.
10. The vue-based system architecture transformation-derived micro-front-end system according to claim 9, wherein the loading module loads the configuration file of the sub-application corresponding to the menu according to the configuration information in the menu management information, loads the object file of the sub-application according to the configuration file and executes the object file in the code execution phase, and comprises:
a user accesses a certain menu and loads a configuration file of the sub-application according to the menu management information;
determining whether the sub-application depends on other sub-applications according to the configuration file; if other sub-applications are depended on, loading the depended sub-applications, and mounting components and methods thrown out by the program interfaces of the depended sub-applications on the attributes of the window objects and the unique identifiers of the sub-applications in one-to-one correspondence, so that the methods and the components thrown out by the depended other sub-applications in the sub-applications are used through special identifiers;
the main application adds the sub application target file according to the configuration file of the sub application;
and according to the configuration information in the menu management information, acquiring the name of the component corresponding to the menu, acquiring the component reference of the corresponding name thrown out from the sub application program interface, and rendering the component in the main application to finish the service function.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211435498.5A CN115857999A (en) | 2022-11-16 | 2022-11-16 | Method and system for obtaining micro front-end system architecture based on vue system architecture transformation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211435498.5A CN115857999A (en) | 2022-11-16 | 2022-11-16 | Method and system for obtaining micro front-end system architecture based on vue system architecture transformation |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115857999A true CN115857999A (en) | 2023-03-28 |
Family
ID=85663732
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211435498.5A Pending CN115857999A (en) | 2022-11-16 | 2022-11-16 | Method and system for obtaining micro front-end system architecture based on vue system architecture transformation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115857999A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116360779A (en) * | 2023-06-02 | 2023-06-30 | 杭州比智科技有限公司 | Method for constructing micro front end base based on qiankun in Vue CLI application |
-
2022
- 2022-11-16 CN CN202211435498.5A patent/CN115857999A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116360779A (en) * | 2023-06-02 | 2023-06-30 | 杭州比智科技有限公司 | Method for constructing micro front end base based on qiankun in Vue CLI application |
| CN116360779B (en) * | 2023-06-02 | 2023-08-15 | 杭州比智科技有限公司 | Method for constructing micro front end base based on qiankun in Vue CLI application |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2017185606A1 (en) | Overlay mechanism-based apk development method and system | |
| US10216509B2 (en) | Continuous and automatic application development and deployment | |
| CN105657191B (en) | Application increment upgrading method and system based on Android system | |
| US9047160B2 (en) | Designing and building virtual images using semantically rich composable software image bundles | |
| WO2022016848A1 (en) | Method and apparatus for performing application deployment according to service role | |
| CN107733985B (en) | Method and device for deploying functional components of cloud computing system | |
| US20090064196A1 (en) | Model based device driver code generation | |
| CN112181602A (en) | Resource arranging method and device, electronic equipment and storage medium | |
| CN106775744B (en) | Method and device for generating static library | |
| KR20070049095A (en) | Servicing a component-base software product | |
| KR20200115020A (en) | Hyperledger fabric network creation method, controller and storage medium | |
| US9383985B2 (en) | Automated modification of pre-generated MSI packaged applications | |
| JP2024536124A (en) | Checking source code validity when updating code | |
| WO2017033441A1 (en) | System construction assistance system and method, and storage medium | |
| CN113805882A (en) | Method and device for developing application program, electronic equipment and storage medium | |
| EP4036716B1 (en) | Method and device for acquiring mirror image file | |
| CN104503778A (en) | Installation method and installation device for applications | |
| CN114461182A (en) | Method and device for pipeline construction, electronic equipment and computer readable storage medium | |
| CN115857999A (en) | Method and system for obtaining micro front-end system architecture based on vue system architecture transformation | |
| CN113900704A (en) | Method and device for issuing application program installation package, readable medium and electronic equipment | |
| WO2011080070A1 (en) | Melding of mediation flow service component architecture (sca) components | |
| CN114721647B (en) | Object-oriented programming method based on codeless application development | |
| US9646118B1 (en) | Linking of simulators into a circuit design tool | |
| CN110806891A (en) | Method and device for generating software version of embedded equipment | |
| Setyautami et al. | Modeling multi software product lines using UML |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |