CN118245050B

CN118245050B - Front end frame assembly automatic conversion method, system, electronic device and storage medium

Info

Publication number: CN118245050B
Application number: CN202410317323.7A
Authority: CN
Inventors: 范伟梅; 刘佳文; 刘帅英; 王连光
Original assignee: Guangzhou Xuanwu Wireless Technology Co Ltd
Current assignee: Guangzhou Xuanwu Wireless Technology Co Ltd
Priority date: 2024-03-20
Filing date: 2024-03-20
Publication date: 2024-09-17
Anticipated expiration: 2044-03-20
Also published as: CN118245050A

Abstract

The embodiment of the application provides a front end frame assembly automatic conversion method, a system, electronic equipment and a storage medium, and belongs to the technical field of computer networks. According to the scheme, component information under the Angular frame is divided into three parts of contents of a laminated style sheet, a hypertext markup language template and TYPESCRIPT codes, grammar and semantics of the three parts of contents are analyzed and converted respectively, and then the converted three parts of contents are written into corresponding labels in the Vue component according to a preset rule, so that the Angular frame component in a project can be automatically converted into the Vue frame component, the code migration speed is improved, and the repeated work of a developer is reduced.

Description

Front end frame assembly automatic conversion method, system, electronic device and storage medium

Technical Field

The present application relates to the field of computer networks, and in particular, to a method and system for automatically converting a front end frame assembly, an electronic device, and a storage medium.

Background

The Angu l ar framework is a front-end development framework which appears earlier, most of the history projects are realized based on the Angu l ar framework at present, and the history projects are updated and iterated for a plurality of years, and are continuously put into use in the future. With the rapid development of front-end technology in recent years, domestic Vue is currently the main battlefield of the front-end framework, and code sharing cannot be realized based on projects of different frameworks, so Angu l ar frameworks need to be converted into Vue frameworks. However, the two frames Angu l ar and Vue have relatively large differences, and the best practices of grammar and codes and the usage of some specific scenes are quite different, so that the conversion can only be carried out by manually migrating codes at present, and a lot of time and effort are required for developers.

Disclosure of Invention

The embodiment of the application mainly aims to provide a front-end code automatic conversion method, a system, electronic equipment and a storage medium, and aims to automatically convert Angu l ar frame components in projects into Vue frame components, improve the code migration speed and reduce repeated work of developers.

To achieve the above object, an aspect of an embodiment of the present application provides a front end frame assembly automatic conversion method, including:

acquiring Angu l ar a first cascading style sheet, a hypertext markup language template and a first TYPESCR IPT code of a frame component file;

Analyzing and converting the first cascading style sheet to obtain a second cascading style sheet;

Carrying out grammar and semantic analysis and conversion on the hypertext markup language template to obtain a first document object model tree structure object of the hypertext markup language template;

Collecting data from the first document object model tree structure object, and synchronizing the collected data to the first TYPESCR IPT codes;

Carrying out grammar and semantic analysis and conversion on a first variable, a first method body and a first import sentence in the first TYPESCR IPT code respectively to correspondingly obtain a second variable, a second method body and a second import sentence;

converting the first document object model tree structure object into a hypertext markup language template string;

splicing a plurality of second method bodies, the second variables and the second import sentences to obtain a second TYPESCR IPT code which accords with the Vue frame grammar specification;

Creating a Vue file, and writing the second cascading style sheet, the hypertext markup language template character string and the second TYPESCR I PT codes into corresponding tags in the Vue file according to a preset rule to obtain a Vue frame assembly file.

In some embodiments, the obtaining Angu l ar the first cascading style sheet, the hypertext markup language template, and the first TYPESCR I PT code of the frame component file includes the steps of:

Acquiring a first cascading style sheet reference path, a hypertext markup language template reference path and a first TYPESCR I PT code;

Reading a first cascading style sheet according to the first cascading style sheet reference path;

Reading the hypertext markup language template according to the hypertext markup language template reference path.

In some embodiments, the parsing and converting the first cascading style sheet to obtain a second cascading style sheet includes the following steps:

Analyzing the first cascading style sheet to obtain a target modification part needing to be replaced in the first cascading style sheet;

And converting the target modification part through a regular expression to obtain a second cascading style sheet.

In some embodiments, the parsing and converting the hypertext markup language template to obtain a first document object model tree structure object of the hypertext markup language template includes the following steps:

Analyzing the character string of the hypertext markup language template through an analyzer to obtain a second document object model tree structure object, wherein the second document object model tree structure object comprises a plurality of element nodes, and the element nodes are used for representing instructions or attributes;

recursively traversing element nodes in the second document object model tree structure object, deleting useless element nodes in the second document object model tree structure object, and recording father nodes of traversed element nodes and traversed special element nodes into a data collector;

carrying out grammar semantic analysis and conversion on element nodes of corresponding instructions in the second document object model tree structure object, and updating to obtain element nodes conforming to the grammar specification of the Vue frame instructions;

Carrying out grammar semantic analysis and conversion on element nodes of corresponding attributes in the second document object model tree structure object, and updating to obtain element nodes conforming to the Vue frame grammar attribute specification;

and obtaining a first document object model tree structure object according to all updated element nodes.

In some embodiments, the collecting data from the first document object model tree structure object and synchronizing the collected data to the first TYPESCR I PT codes includes the steps of:

Traversing all element nodes in the first document object model tree structure object, and extracting variables and methods in element node attributes;

The extracted variables and methods are synchronized into the first TYPESCR I PT code.

In some embodiments, the parsing and converting are performed on the first variable, the first method body and the first import sentence in the first TYPESCR I PT code to obtain a second variable, a second method body and a second import sentence, respectively, including the following steps:

Performing type definition on a first variable in the first TYPESCR I PT codes according to a Vue variable definition rule, and analyzing the first variable by adopting corresponding analysis logic according to the type of the first variable to obtain a second variable, wherein the second variable is a Vue variable conforming to a Vue frame grammar specification;

creating a corresponding abstract syntax tree structure object according to each first method body; traversing each node in the abstract syntax tree structure object to obtain a code segment needing replacement; replacing the code segments to be replaced through a regular expression to obtain a second method body;

and carrying out reference processing on the first import statement according to a preset import statement rule to obtain a second import statement, wherein the reference processing comprises one of reference deletion, reference replacement, common reference conversion or reference reservation.

In some embodiments, the concatenating the plurality of the second method body, the second variable, and the second import statement, obtains a second TYPESCR I PT code that conforms to the Vue frame syntax specification, including the steps of:

Writing the second method body of the life cycle function type into the hook function corresponding to the Vue environment to obtain the second method body of the hook function type;

After all the second method bodies of the hook function type are assembled, assembling the second method bodies of the common function type to obtain a first assembly code;

Sequentially assembling the second variables of different types on the first assembly code according to the splicing sequence of the second variables of different types to obtain a second assembly code;

And assembling the second import statement on the second assembled code to obtain a second TYPESCR I PT code which accords with the Vue frame grammar specification.

To achieve the above object, another aspect of an embodiment of the present application provides a front end frame assembly automatic conversion system, the system comprising:

A first module for obtaining Angu l ar a first cascading style sheet, a hypertext markup language template, and a first TYPESCR I PT code of a frame assembly file;

the second module is used for analyzing and converting the first cascading style sheet to obtain a second cascading style sheet;

The third module is used for carrying out grammar and semantic analysis and conversion on the hypertext markup language template to obtain a first document object model tree structure object of the hypertext markup language template;

A fourth module, configured to collect data from the first document object model tree structure object, and synchronize the collected data to the first TYPESCR I PT codes;

A fifth module, configured to parse and convert the first variable, the first method body, and the first import sentence in the first TYPESCR I PT code to obtain a second variable, a second method body, and a second import sentence correspondingly;

a sixth module for converting the first document object model tree structure object into a hypertext markup language template string;

A seventh module, configured to splice the plurality of second method bodies, the second variables, and the second import statements to obtain a second TYPESCR I PT code that accords with a Vue frame grammar specification;

And an eighth module, configured to create a Vue file, and write the second cascading style sheet, the hypertext markup language template string, and the second TYPESCR I PT code into corresponding tags in the Vue file according to a preset rule, so as to obtain a Vue frame assembly file.

To achieve the above object, another aspect of the embodiments of the present application provides an electronic device, which includes a memory storing a computer program and a processor implementing the above method when executing the computer program.

To achieve the above object, another aspect of the embodiments of the present application proposes a computer-readable storage medium storing a computer program which, when executed by a processor, implements the above-mentioned method.

The embodiment of the application at least comprises the following beneficial effects: the application provides an automatic conversion method, a system, electronic equipment and a storage medium for front-end frame components, which divide component information under Angu l ar frames into three parts of contents of a layering style sheet, a hypertext markup language template and TYPESCR I PT codes, respectively analyze and convert grammar semantics of the three parts of contents, and write the converted three parts of contents into corresponding labels in a Vue component according to preset rules, so that the Angu l ar frame components in a project can be automatically converted into the Vue frame components, the code migration speed is improved, and the repeated work of a developer is reduced.

Drawings

FIG. 1 is a flow chart of a method for automatically converting a front end frame assembly provided by an embodiment of the present application;

FIG. 2 is a schematic diagram of TYPESCR I PT code components provided by an embodiment of the present application;

FIG. 3 is a diagram of a program interface for writing Angu l ar framework component code to a Vue framework component, provided by an embodiment of the present application;

FIG. 4 is a flow chart illustrating parsing of a HTML template provided by an embodiment of the present application;

FIG. 5 is a schematic diagram of a structure of a tree structure object of a document object model according to an embodiment of the present application;

FIG. 6 is a schematic diagram of an elemental node provided by an embodiment of the present application;

FIG. 7 is a schematic diagram of a variable structure in Angu l ar framework environment provided by an embodiment of the present application;

FIG. 8 is a schematic diagram of variable types in a Vue framework environment provided by an embodiment of the application;

FIG. 9 is a flow chart for single method body resolution provided by an embodiment of the present application;

FIG. 10 is a schematic diagram of an import sentence according to an embodiment of the present application;

FIG. 11 is a flow chart of assembling TYPESCR I PT codes provided by an embodiment of the present application;

FIG. 12 is a flow chart of a method for providing automatic conversion of a front end frame assembly in accordance with another embodiment of the present application;

FIG. 13 (a) is a program interface diagram in Angu l ar framework components provided in accordance with an embodiment of the present application;

FIG. 13 (b) is a program interface diagram in a Vue framework component provided by an embodiment of the application.

Detailed Description

The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with embodiments of the application, but are merely examples of apparatuses and methods consistent with aspects of embodiments of the application as detailed in the accompanying claims.

It is to be understood that the terms "first," "second," and the like, as used herein, may be used to describe various concepts, but are not limited by these terms unless otherwise specified. These terms are only used to distinguish one concept from another. For example, the first information may also be referred to as second information, and similarly, the second information may also be referred to as first information, without departing from the scope of embodiments of the present application. The words "if", as used herein, may be interpreted as "at … …" or "at … …" or "in response to a determination", depending on the context.

The terms "at least one", "a plurality", "each", "any" and the like as used herein, at least one includes one, two or more, a plurality includes two or more, each means each of the corresponding plurality, and any one means any of the plurality.

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the application only and is not intended to be limiting of the application.

Before describing embodiments of the present application in detail, some of the terms and expressions that are referred to in the embodiments of the present application will be described first, and the terms and expressions that are referred to in the embodiments of the present application are applicable to the following explanation.

(1) HTML (HyperText Markup Language ) is a markup language. Each portion in the web page to be displayed is marked by a mark symbol. The web page file itself is a text file that can tell the browser how to display the content therein by adding a marker to the text file.

(2) CSS (CASCAD I NG STY L E SHEETS), cascading style sheets) are used to describe the appearance and style of a web page. It has simple and easy grammar and can embed style rules directly in HTML document.

(3) Ts refers herein to code in one component that pertains to the TYPESCR I PT code portion.

(4) L ess is a CSS preprocessor, which expands the functions of CSS and provides functions of variable, nesting rule, mixing, etc., so that the writing of CSS is more convenient and flexible.

(5) Sass is also a CSS preprocessor, similar to I ess, but with more functionality and flexibility. sass using the indented grammar, nesting rules and hierarchical relationships can be more clearly represented.

Because Angu l ar and the Vue frames have large differences, the best practice including grammar and codes and the use of some specific scenes are quite different, no method for automatically converting Anug l ar codes existing in projects into the Vue codes exists at present, and only a compromise scheme is adopted, so that codes based on the frames are allowed to exist under the same system, and the scheme is a micro front end. The micro front end is that a plurality of independent small items exist under the same system, the small items share a set of login authorized data, data transmission and monitoring can be carried out among micro applications, and own components can be exported for other micro applications to be quoted, so that the difference is not perceived by users, and the same experience as that of using a single application platform is achieved. However, the solution of the micro front end is applicable if the function points which are realized before are not changed, the version iteration only adds new function points, but when the micro front end is faced with the need of frequent change adjustment or extracting a large number of public components from projects, the micro application based on different frameworks cannot realize code sharing, namely the extracted public component codes cannot be shared, and the files which are packed and deployed have redundant codes, so that the code development or conversion based on the components which can be shared under the same framework is required.

In view of the above, embodiments of the present application provide a front end frame assembly automatic conversion method, system, electronic device and storage medium, so as to solve the above-mentioned problems.

The embodiment of the application provides an automatic conversion method for a front end frame assembly, and relates to the technical field of computer networks. The front end frame assembly automatic conversion method provided by the embodiment of the application can be applied to a terminal, a server and software running in the terminal or the server. In some embodiments, the terminal may be, but is not limited to, a smart phone, a tablet computer, a notebook computer, a desktop computer, etc.; the server side can be configured as an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, and can be configured as a cloud server for providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs, basic cloud computing services such as big data and artificial intelligence platforms, and the server can also be a node server in a blockchain network; the software may be an application or the like that implements the front-end framework component automatic conversion method, but is not limited to the above form.

The application is operational with numerous general purpose or special purpose computer system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

Fig. 1 is an alternative flowchart of a front end frame assembly automatic conversion method provided by an embodiment of the present application, where the method in fig. 1 may include, but is not limited to, steps S101 to S108:

Step S101, a first cascading style sheet, a hypertext markup language template and a first TYPESCR I PT code of a Angu l ar framework component file are obtained;

step S102, analyzing and converting the first cascading style sheet to obtain a second cascading style sheet;

step S103, carrying out grammar and semantic analysis and conversion on the hypertext markup language template to obtain a first document object model tree structure object of the hypertext markup language template;

step S104, collecting data from the first document object model tree structure object, and synchronizing the collected data to a first TYPESCR I PT code;

step S105, respectively carrying out grammar and semantic analysis and conversion on a first variable, a first method body and a first import sentence in a first TYPESCR IPT code, and correspondingly obtaining a second variable, a second method body and a second import sentence;

step S106, converting the first document object model tree structure object into a hypertext markup language template character string;

Step S107, splicing a plurality of second method bodies, second variables and second import sentences to obtain a second TYPESCR IPT code which accords with the Vue frame grammar specification;

And S108, creating a Vue file, and writing the second cascading style sheet, the hypertext markup language template character string and the second TYPESCR IPT codes into corresponding tags in the Vue file according to a preset rule to obtain a Vue frame assembly file.

In some embodiments, in step S101, a project developed based on Angu l ar may include a plurality of modules, one module including a plurality of components, one component including three portions, a first cascading style sheet, a hypertext markup language template, and a first TYPESCR IPT code, respectively. And reading file contents according to the Angular component file path to acquire a first cascading style sheet, a hypertext markup language template and a first TYPESCR IPT code.

In step S102 of some embodiments, the first cascading style sheet is stored in the component in the form of a character string, and the second cascading style sheet obtained by parsing and converting the first cascading style sheet is in the form of a character string.

In step S103 of some embodiments, the first document object model (Document Object Mode l, DOM) tree structure object can reflect the structure and content of the hypertext markup language template, through which the first document object model tree structure object can more conveniently process and transform the hypertext markup language template.

In step S104 of some embodiments, after parsing the hypertext markup language template, variable or method body data may be collected from the first document object model tree structure object and the collected data may be synchronized to the first TYPESCR IPT code before parsing TYPESCR I PT codes.

In step S105 of some embodiments, referring to fig. 2, the first TYPESCR IPT code includes a first variable, a first method body and a first import statement, and the first TYPESCR IPT code may be processed by using a tool library to obtain an abstract syntax tree (Abstract Syntax Tree, AST) structure object, and the TYPESCR IPT code is subjected to syntax analysis and judgment, so that the abstract syntax tree structure object is disassembled to obtain the first variable, the first method body and the first import statement. And respectively carrying out grammar and semantic analysis and conversion on the first variable, the first method body and the first import statement in the first TYPESCR IPT code, and correspondingly obtaining a second variable, a second method body and a second import statement.

In step S106 of some embodiments, the converted first document object model tree structure object may be converted into a hypertext markup language template string by means of a tool library. For example, data in the first document object model tree structure object is converted to a string form by invoking the str i ngfy method in the third party tool library "hima l aya".

In step S107 of some embodiments, because the generation of TYPESCR IPT codes is not provided by the existing interface, the second method body, the second variable and the second import statement obtained by parsing are spliced in a bottom-up manner, so as to obtain second TYPESCR I PT codes conforming to the Vue frame grammar specification.

In step S108 of some embodiments, referring to fig. 3, after resolving the code in the Angu l ar frame component file, creating a Vue file, writing the second cascading style sheet between sty l e labels specified by the Vue file, writing the hypertext markup language template string between temp l ate labels specified by the corresponding writing, and writing the second TYPESCR I PT code between scr ipt labels specified by the corresponding writing, so as to obtain the Vue frame component file.

According to the embodiment of the application, the component information under the Angu l ar frame is divided into three parts of contents of the laminated style sheet, the hypertext markup language template and the TYPESCR IPT code, the three parts of contents are respectively subjected to grammar and semantic analysis and conversion, and then the converted three parts of contents are written into corresponding labels in the Vue component according to the preset rule, so that the Angu l ar frame component in the project can be automatically converted into the Vue frame component, the code migration speed is improved, and the repeated work of a developer is reduced.

In some embodiments, step S101 may include, but is not limited to including, step S201 to step S203:

Step S201, a first cascading style sheet reference path, a hypertext markup language template reference path and a first TYPESCR I PT code are acquired;

step S202, reading a first cascading style sheet according to a first cascading style sheet reference path;

Step S203, reading the hypertext markup language template according to the hypertext markup language template reference path.

In step S201 of some embodiments, the third party tool library "TYPESCR IPT-parser" may be used to analyze Angu l ar the content of the framework component file, obtain the first TPYESCR IPT code, and generate a Fi l e object. The tool library 'TYPESCR IT-parser' is universal and is not aimed at Angu l ar components, so that data information in the Component decorator @ Component is lost, therefore, certain modification is needed to be carried out on the third-party tool library, analysis on parameters in the Component decorator @ Component is added, the parameters are converted into decorator attributes in Fi l e objects after analysis, and a reference path sty l esUr l corresponding to first cascading style sheet content corresponding to Angu l ar components and a reference path tmpe l ateUr l corresponding to hypertext markup language template content are obtained from decorator attributes.

In step S202 of some embodiments, the cascading style sheet is usually stored under the current component directory of the item (under the same level directory as the ts file) with ". L ess", and the content of the Angu l ar frame component file may be analyzed by means of a third party tool library "TYPESCR IPT-parser", and the first cascading style sheet is read in the Angu l ar component item according to sty l esUr l according to the acquired first cascading style sheet reference path sty l esUr l.

In some embodiments, in step S203, the hypertext markup language template is stored under the current component directory of the project (under the same level directory as the ts file) with the ". Html" as the suffix, the content of the frame component file of Angu l ar may be analyzed by means of a third party tool library "TYPESCR IPT-parser", the hypertext markup language template is read in Angu l ar component project according to the reference path tmpe l ateUr l corresponding to the obtained hypertext markup language template content, and the read hypertext markup language template content is converted into character string form according to tmpe l ateUr l for subsequent processing.

According to the embodiment of the application, the TPYESCR I PT codes, the reference paths of the cascading style sheets and the reference paths of the hypertext markup language templates are obtained by analyzing the Angu l ar framework component files, and the cascading style sheets and the hypertext markup language templates are read according to the reference paths, so that the cascading style sheets and the hypertext markup language templates can be automatically read, the operations of developers are reduced, and the code migration speed is improved.

In some embodiments, step S102 may include, but is not limited to including, step S301 to step S302:

Step S301, analyzing the first cascading style sheet to obtain a target modification part needing to be replaced in the first cascading style sheet;

And step S302, converting the target modification part through the regular expression to obtain a second cascading style sheet.

In step S301 of some embodiments, since the cascading style representation is frame-agnostic, only the style syntax form in the reset third party U I library (Antd component library) differs when migrating from Angu l ar frames into the environment of the Vue frame, as any front end frame is generic. Analyzing the first cascading style sheet to obtain U I library parts in the first cascading style sheet, comparing the grammar differences of the styles of the U I library in the Angu l ar frame and the Vue frame, and determining target modification parts needing replacement. Illustratively, resetting the third party component internal style in the Angu l ar environment is accomplished by the ": host: ng-deep. C l assName" and in the Vue environment is accomplished by the write of ": deep (. C L ASSNAME)".

In step S302 of some embodiments, the target modification portion obtained by the comparison is modified by the regular expression to obtain a second cascading style sheet conforming to the form of the internal style grammar of the reset third party component in the Vue environment.

According to the embodiment of the application, the first cascading style sheet is analyzed, the target modification parts with different style grammar forms in the U I library are obtained by comparison, and the target modification parts are converted, so that the cascading style sheet in accordance with the style grammar form of the U I library in the Vue environment can be automatically obtained, the influence of style change caused by frame switching is reduced, and the conversion efficiency of the front end frame assembly is improved.

In some embodiments, step S103 may include, but is not limited to including, step S401 to step S405:

Step S401, analyzing the character string of the hypertext markup language template through an analyzer to obtain a second document object model tree structure object, wherein the second document object model tree structure object comprises a plurality of element nodes, and the element nodes are used for representing instructions or attributes;

Step S402, recursively traversing element nodes in the second document object model tree structure object, deleting useless element nodes in the second document object model tree structure object, and recording father nodes of the traversed element nodes and traversed special element nodes into a data collector;

step S403, carrying out grammar semantic analysis and conversion on element nodes corresponding to instructions in the second document object model tree structure object, and updating to obtain element nodes conforming to the grammar specification of the Vue frame instructions;

step S404, carrying out grammar semantic analysis and conversion on element nodes of corresponding attributes in the second document object model tree structure object, and updating to obtain element nodes conforming to the Vue frame grammar attribute specification;

Step S405, obtaining a first document object model tree structure object according to all updated element nodes.

Referring to FIG. 4, in some embodiments, the parse method in third party tool library "hima l aya" may be invoked to process the retrieved hypertext markup language template string and parse it to obtain a second document object model tree structure object.

Initializing a data collector context, wherein the data collector is used for recording some key information, such as nodes and father nodes currently being traversed and recording some special nodes, when recursively traversing all nodes, and the key information is needed to be used in subsequent analysis of ts content. Some nodes, such as the v-model attribute generated by the unit element input/checkbox, etc., need to be combined with the v-model attribute value of the parent node form element at the time of conversion.

Referring to fig. 4 and 5, the second document object model tree structure object is composed of three types of nodes, namely a text node, an annotation node, and an element node. The element node is a node with the type of element, and correspondingly comprises an attribute attributes, a tag name tagName and a child node child; the text node is a node with the type of text and correspondingly contains text content; the comment node is a node of which the type is comment, and corresponds to a content containing text. Among these nodes, text nodes do not need any processing, annotation nodes are deleted before migrating to the Vue framework environment, and the focus is on the processing of element nodes.

In the process of recursively traversing the processing element nodes, lexical, grammatical, semantic analysis and conversion and mapping of tag names are carried out on the element node attributes. Since there are many instructions in the UI library (ng-zorro-antd) on which the Angular framework item depends, but the corresponding UI library (ant-design-Vue) in the Vue framework environment is a component, such as tootip, a drop-down menu, etc., the instructions and the attributes need to be processed separately, so in the recursion process, the useless ng-tempalte element nodes are filtered and deleted first, then the instructions are processed, then the attributes are processed, and finally the tag numbers are mapped.

Referring to fig. 6, the instruction and the attribute both correspond to a common node element and a special node element, and cells in the code directory structure can be understood as cells, default is the processing of the attribute and the instruction on the common node element, and other is the processing of the attribute and the instruction by the special element node, such as form/nz-form-item/se/select related element nodes of a form, and st element node related to the form. The following describes how the element node performs the conversion of the attribute using the form component used at high frequency as an example.

Illustratively, the attribute processing is illustrated with the nz-form-item element node converted to an a-form-item element node. The write method of the attribute of the nz-form-item element node in the Angular framework component is as follows:

<nz-form-item>

< nz-form-labelnz-col nzSpan = "6" nzrequired > Procode of nz-form-label >

< Nz-form-control nz-col nzSpan = "17" nzErrorTip= "original code cannot be null-! ">

< Input type= "password" nz-input placeholder = "please input the original password" formControlName = "ioldPassword" name= "oldPassword"

minlength＝"1"autocomplete＝"off"/>

</nz-form-control>

</nz-form-item>。

The write method of the attribute of the a-form-item element node in the Vue framework component is as follows:

< a-form-item required = "{ 'span':6}" label = "original code": wrapp-col = "{ 'span':17}" name = "ioldPassword"

The = "[ { 'required': true, 'message': the original password cannot be null-! 'whitespace': true } ">

< A-input type= "password" placeholder= "please input the original password "v-model:value＝"loginForm.ioldPassword"name＝"oldPassword"minlength＝"1"au tocomplete＝"off"></a-input>

</a-form-item>。

When element nodes (A nodes) with label numbers of nz-form-item are encountered in the process of traversing the element nodes, the method in nzFormItemAttrs in the form-item file under cells is executed:

(1) Processing the attribute on the node A by adopting a default general attribute processing method;

(2) Obtaining child nodes nz-form-label under the node A, and putting the obtained label, label-col, required, html-for, hellp and other attributes into an attribute array of the node A;

(3) The child node nz-form-control under the node A is obtained, attributes such as wrapper-col, rules, validate-status are put into an attribute array of the node A, in the process, the obtaining of the attribute rule is obtained by analyzing from nzErrorTip, nzErrorTip is a character string corresponding to message information of the attribute required, and the following two cases exist: one is a common character string, when the attribute required in the step (2) is true, a check rule can be obtained, and when the attribute required is a variable, the check rule needs to be complemented after the analysis of the code content is completed, and TYPESCRIPT is needed;

(4) And acquiring a child node form control such as input, select, switch, checkbox under the nz-form-control, acquiring the formControlName and [ (ngModel) ] attribute values of the form control as the name attribute values of the A node, and directly assigning the child node under the nz-form-control to the A node to serve as a direct child node of the A node.

The processing of an instruction is similar to the processing principle of attributes, except that the instruction processing may require a new node, and if the node where the instruction is located is a component, a new element node needs to be extracted from a parent as a carrier of the instruction.

Illustratively, the instruction processing is illustrated with the nz-popover element node converted to an a-popover element node. The write method of the instruction of the nz-popover element node in the Angular framework component is as follows:

<a style＝"position:absolute；"[ngStyle]＝"{left:x+'px',top:y+'px'}"nz-popo ver nzType＝"primary"

[nzPopoverTitle]＝"title"[nzPopoverContent]＝"contentTemp"[nzPopoverVisible]＝"visible"></a>

<ng-template#contentTemp>

<li*ngFor＝"let text of desc">{{text}}</li>

</ul>

</ng-template>。

the write of instructions in the Vue framework component for the a-popover element nodes is as follows:

<a-popover:title＝"title":visible＝"visible">

<template#content>

</ul>

</template>

</a-popover>。

When element nodes with the label name nz-popover are encountered in the process of traversing the element nodes, the following method is executed:

(1) Creating a new node, wherein the label of the node is a-popover, and deleting and setting nzPopoverTitle, nzPopoverContent, nzPopoverVisible related attributes from the original node to the newly created node;

(2) The original node serves as a direct sub-level of the new node a-popover;

(3) nzPopoverTitle, nzPopoverContent, nzPopoverVisible in the new nodes a-popover are replaced with title, content, visible, respectively, and the templates corresponding to content are moved into the new nodes a-popover.

And deleting the blank caused by node deletion according to all updated element nodes to obtain a first document object model tree structure object, and storing the first document object model tree structure object in a data format of JSON variables for subsequent processing.

The embodiment of the application further divides the analysis of the hypertext markup language template into the analysis of instructions and the analysis of attributes by performing the processing of lexical, grammatical and semantic analysis and conversion on the hypertext markup language template, can reduce redundant operation in the conversion process, and realizes the automatic conversion of the hypertext markup language template under Anug l ar frames into the hypertext markup language template under Vue frames.

In some embodiments, step S104 may further include, but is not limited to including, step S501 to step S502:

step S501, traversing all element nodes in the tree structure object of the first document object model, and extracting variables and methods in the element node attributes;

step S502, the extracted variables and methods are synchronized into the first TYPESCR I PT codes.

In step S501 of some embodiments, all element nodes in the first document object model tree structure object need to be traversed first, variables and methods are collected from node attributes, for example, v-if, v-for and v-model correspondence in the node attributes may be variables or expressions, the node attribute is an object or variable value corresponding to prop, and the node attribute @ emitName is a method corresponding to prop.

In step S502 of some embodiments, the collected variables and method data are synchronized into the first TYPESCR IPT code for processing in the first TYPESCR IPT code parsing process. For example, when an icon is included in a node, a corresponding class of icons needs to be imported when parsing TYPESCR IPT the code.

According to the embodiment of the application, the variables and the methods in the hypertext markup language template are collected and synchronized to TYPESCR IPT codes, so that the variables and the methods from the hypertext markup language template can be analyzed in the process of analyzing TYPESCR IPT codes later, and the accuracy of analysis is improved.

In some embodiments, step S105 includes, but is not limited to including, step S601 to step S603:

Step S601, performing type definition on a first variable in a first TYPESCR IPT code according to a Vue variable definition rule, and analyzing the first variable by adopting corresponding analysis logic according to the type of the first variable to obtain a second variable, wherein the second variable is a Vue variable conforming to a Vue frame grammar specification;

Step S602, creating a corresponding abstract syntax tree structure object according to each first method body; traversing each node in the abstract syntax tree structure object to obtain a code segment needing to be replaced; replacing the code segments to be replaced through the regular expression to obtain a second method body;

Step S603, performing reference processing on the first import statement according to a preset import statement rule to obtain a second import statement, wherein the reference processing comprises one of reference deletion, reference replacement, common reference conversion or reference reservation.

In step S601 of some embodiments, a variable in the Angu l ar framework environment includes key information such as a variable name, a variable initial value va l ue, a variable type, a template reference variable VIEWCHILD, a template reference variable array VIEWCHILDREN, ISINPUT (indicating whether it is an @ Input variable), and isOutput (indicating whether it is an @ Output variable).

Referring to fig. 7, fig. 7 provides a common variable in the environment of an Angular framework, which indicates that a variable type is a string type, the variable name is "unusualTipWithoutPhone", and the initial value of the variable is "the system detects that you are logging on an untrusted IP address, please go to the trusted IP address logging-! "variable.

Referring to fig. 8, in the Vue framework environment, there are six types of variables, which are common normal, ref responsive, reactive responsive, emits event, model (representing bi-directional binding) and props (representing parent-transferred variables), respectively. And according to the key information of the variables in the Angular framework environment, performing type definition on the first variables in the first TYPESCR IPT codes, and analyzing the first variables by adopting corresponding analysis logic according to the types of the first variables to obtain Vue variables. The analytical conversion logic is as follows:

Converting the variable correspondence to props variable when isInput in the variable in the Angular framework environment is true and the variable value in the component is not modified;

When isOutput in the variables in the Angular framework environment is true, correspondingly converting the variables into emits event variables;

when the variable in the environment of the Angular framework is acquired from the hypertext markup language template, correspondingly converting the variable into a ref responsive variable;

When isInput in the variables in the Angular framework environment is true and the variable values in the components are modified, correspondingly converting the variables into model variables;

When the variable in the environment of the Angular framework is acquired from the hypertext markup language template and the variable type is an object or not an array, correspondingly converting the variable into a reactive response variable;

when a variable in the environment of the Angular framework is a variable used in the method body, the variable is correspondingly converted into a common variable.

The variable analysis and conversion under the Angular framework environment is always performed to props variables, emits event variables and ref response variables, so that the three variables can be processed first, and other variables used in the method can be analyzed again when the method is analyzed, and if the variables which are not used after conversion exist, the variables are deleted later.

In step S602 of some embodiments, the method body parsing applied in the hypertext markup language template is started first, if another method body is called in the method body, the method in the life cycle function is parsed recursively, and then parsed.

Referring to fig. 9, fig. 9 provides a flow chart for single method body resolution. Specifically, a code of the first method body may be intercepted from the first TYPESCR IPT codes according to the start and end positions of the method body; creating an abstract syntax tree structure object by using createSourceTree methods provided by a Compiler Api; traversing each node in the abstract syntax tree structure object, and collecting variables used in the first method body and performing variable analysis on the variables in the traversing process. In addition, if a code of a certain section needs to be replaced, the original character string before the code replacement and the character string after the code replacement are collected into the same array for storage. If the method body is found to call other method bodies in the process of traversing the first method body, for example, the method body B is found to be called when the method body A is analyzed, the method body A is analyzed after the method body B is analyzed.

Because the abstract syntax tree structure is changed if the character strings of the first method body are replaced in the process of collecting information by the traversing nodes, the steps of recursively traversing each node to collect information and replace the method body are split into two steps, after all data of a single method body are collected by traversing, replacing the method body by using a regular expression, and replacing the method body in sequence according to the sequence of the collected code fragments, variables, constructors Service and character strings this, so that a second method body is finally obtained.

When processing a variable, since the value of the variable may be a complex object, the object has many attributes, and some of the attributes correspond to methods, so that the analysis of the value of the variable is also processed according to the logic of the method body. The value of the variable may also be an arrow, which after conversion exists as a function in the Vue framework environment.

In step S603 of some embodiments, the first import statement is encountered during both the parsing of the first method body and the parsing of the first variable, so that the first import statement needs to be parsed simultaneously with the parsing of the first method body and the parsing of the first variable. Referring to fig. 10, fig. 10 provides a structure corresponding to an import importation. In parsing the import statement of the import, for the Angular-related reference statement, for example, when LibraryName starts with @ Angular or ng-zorro-antd, the import statement is deleted from the source code and the variable of type LibraryName is replaced with an any type (any type is a special type provided by TYPESCRIPT, type checking is not performed, and compiling errors due to type mismatch can be avoided). Common reference transformations include substitution of LibraryName for @ icc/components when LibraryName is beginning with @ icc/common-lib and specifier is ending with Component; if specifier is ending with Service, libraryName is replaced with @ icc/hops; other common methods are replaced with @ icc/utils. When LibraryName is a reference to another external third party library, such as date or rxjs, the import statement is retained. When the TYPESCR IPT hook function Fang Fati is spliced, for example, onMounted is encountered, if one LibraryName is Vue, specifier is onMounted of the import sentence; when the ref or reactive variable is spliced, an import statement LibraryName is added, wherein Vue is the import statement, and ref or reactive is the import statement.

The embodiment of the application further divides the analysis of TYPESCR IPT codes into the analysis of variables, fang Fati and imported sentences through the processing of lexical, grammatical and semantic analysis and conversion of TYPESCR IPT codes. According to a Vue variable definition rule, analyzing according to the type correspondence of a first variable to obtain a variable in the Vue environment, replacing a code segment to be replaced in a first method body through a regular expression, and carrying out reference processing on a first import statement according to a preset import statement rule so that the converted component can normally operate. In addition, the processing under TYPESCR IPT code general scenes and the processing under special scenes are considered, the method can be applied to all Angu l ar projects, and the front end framework automatic conversion can be realized only by expanding the special scenes in Angu l ar projects.

In some embodiments, step S107 may include, but is not limited to including, step S701 to step S704:

Step S701, writing a second method body of the life cycle function type into a hook function corresponding to the Vue environment to obtain a second method body of the hook function type;

Step S702, after assembling the second method bodies of all hook function types, assembling the second method bodies of common function types to obtain a first assembly code;

step S703, sequentially assembling second variables of different types on the first assembly code according to the splicing sequence of the second variables of different types to obtain a second assembly code;

step S704, assembling a second import statement on the second assembled code to obtain a second TYPESCR IPT code conforming to the Vue frame grammar specification.

Referring to FIG. 11, in some embodiments, TYPESCR IPT codes of the second method body, the second variable, and the second import statement are generated and linked in a bottom-up manner.

Firstly, a second method body is assembled, the method body is divided into a life cycle function and a common function, besides ngOninit life cycle functions can be directly called in a Vue environment, other life cycle functions in an Angular environment can be called in the Vue environment by finding corresponding hook functions, for example, ngOnChanges method body can be correspondingly written into WATCHEFFECT hook functions, NGAFTERVIEWINIT method body can be correspondingly written into onMounted hook functions, ngOnDestroy method body can be correspondingly written into onUnmounted hook functions, and NGAFTERVIEWCHECKED method body can be correspondingly written into onUpdated hook functions. And splicing the life cycle functions, and splicing other common functions to obtain first assembly codes corresponding to the second method bodies.

The second variable is then spliced over the first assembled code. Six types of variables exist in the Vue environment, the second variables are spliced and assembled in sequence according to the type of the second variables by a writing method of the Vue specification, a second assembly code for assembling a second method body and the second variables is obtained, and the splicing sequence of the second variables is as follows: props variables, emits event variables, common variables, ref responsive variables, reactive responsive variables, and model variables.

And finally, assembling a second import statement on the second assembly code. The uppermost part is an import statement, then useHooks statement, and then is connected with the variable, if there are other statement between the component class and the import statement in the Angular framework component, the statement is spliced on the variable, and finally a complete TYPESCR IPT code (namely second TYPESCR IPT code) is output.

According to the embodiment of the application, the method body, the variables and the imported sentences in TYPESCR IPT codes are respectively spliced, and three parts of contents are assembled into a complete TYPESCR IPT code according to the sequence from bottom to top, so that the occurrence of the condition that the front end frame assembly is converted into errors due to grammar or specification mismatch can be reduced, the grammar specification of a Vue frame is followed, and the quality of the TYPESCR IPT code is improved.

The following describes and illustrates the embodiments of the present application in detail with reference to specific application examples:

Angu l ar the component includes many application scenarios, for example, a component may be a form page, a modal popup window, or a part of a complex interaction logic page, and it is difficult to find a general rule to cover all application scenarios, so that special processing needs to be performed for multiple application scenarios. The automatic conversion of a Anuglar component into a Vue component is realized by using a page scene as an application scene and taking the component as a unit through a code automatic conversion tool ng2Vue for implementing the scheme of the embodiment of the application.

To implement this tool for transcoding automatically, the three parts of the component are handled separately.

The method is characterized in that the method is not distinguished from a frame for a style part, is universal in any frame, only the style grammar form in a UI library is different from the environment from Angular to Vue, and can be universal in other, so that the conversion migration cost of less is small. But the html template part and the ts part are quite different under two frames, this difference comes from the frame-underlying grammar difference on the one hand and the dependent UI library components on the other hand. For example, service in an Angular environment has the form of acquiring a parent component, and there is no corresponding usage in a Vue environment, but it can be replaced in other ways to achieve the same effect.

The parsing and conversion of the html template part can generate a tree structure by means of a third-party tool library himalaya, perform syntactic and semantic analysis on the attribute, the label and the text content of each node, then perform conversion, and regenerate the tree into a section of html template character string.

The analysis and conversion of the ts part can generate an abstract syntax tree structure object by means of a third-party tool library 'typescript-player', the Compiler Api provided by the TYPESCRIPT language itself, extract key information in the abstract syntax tree structure object to obtain a File object, and also perform code conversion through syntax and semantic analysis, and regenerate a ts code segment.

Referring to fig. 12, in an embodiment of the present application, the scheme can be regarded as three processes:

(1) Creating ComponentNg a 2Vue instance object, respectively creating HTM L PARSER a parsing object in a constructor of the creating ComponentNg2Vue instance object for parsing and generating an html template, co l l ect a collector object for parsing expressions in the html template and collecting variables and methods used in the html template and TsParser a parsing object for parsing and generating ts codes.

(2) Invoking ComponentNg a parameter method in the Vue instance object to transfer Angu l ar a frame component file path, reading file content according to the path, generating a Fi l e object, wherein the Fi l e object contains all information of the component, and can acquire the content of three parts of the component: acquiring l ess style content from sty l eUr l s/sty l es and converting the l ess style content through a regular expression; obtaining html template content from temp l ate/temp l ateUr l field, resolving and converting by a parse method of HTML PARSER object, collecting data from htm l, such as variable and method, and placing the variable and method into co l l ect data acquisition object; and analyzing and converting the ts content by combining the data in the collector through the burst method of TsParser objects. The ts content is more complicated to process than the html template content, and analysis of the ts content can be performed by calling createSourceFile a method through a Compiler Api provided by TYPESCRIPT languages to obtain a tree structure of an AST, analyzing and judging code grammar, and then disassembling, converting and reorganizing. The content to be processed is divided into three blocks: processing attribute variables contained in the component class, processing methods of the component class, and processing import statements. Some code segments needing special processing, such as Service in constructor constructors, have no corresponding application method in the Vue environment, and can be replaced by hops, so Service references in the constructors are parsed first, converted into references to hops, then variables are parsed first, then the method is parsed, and finally the import statement of importation is parsed.

(3) The method toTempa lte is invoked to transfer the storage location of the Vue file. And (3) analyzing the converted content in the last step, and writing regenerated codes into the Vue file.

Referring to fig. 13 (a) to 13 (b), by implementing the method according to the embodiment of the present application, three codes in Angu l ar frame assemblies can be converted into a Vue frame assembly, so as to implement automatic conversion of the front end frame assembly.

The embodiment of the application also provides an automatic conversion system of the front end frame assembly, which can realize the automatic conversion method of the front end frame assembly, and the system comprises the following steps:

A first module for obtaining Angu l ar a first cascading style sheet, a hypertext markup language template, and a first TYPESCR IPT code of a frame assembly file;

a fourth module for collecting data from the first document object model tree structure object and synchronizing the collected data to a first TYPESCR IPT code;

A fifth module, configured to parse and convert the first variable, the first method body, and the first import sentence in the first TYPESCR IPT code according to the grammar semantics, and obtain a second variable, a second method body, and a second import sentence correspondingly;

A seventh module, configured to splice a plurality of second method bodies, second variables, and second import statements, to obtain a second TYPESCR IPT code that accords with the Vue frame grammar specification;

And an eighth module, configured to create a Vue file, and write the second cascading style sheet, the hypertext markup language template string and the second TYPESCR IPT code into corresponding tags in the Vue file according to a preset rule, so as to obtain a Vue frame component file.

It can be understood that the content in the above method embodiment is applicable to the system embodiment, and the functions specifically implemented by the system embodiment are the same as those of the above method embodiment, and the achieved beneficial effects are the same as those of the above method embodiment.

The embodiment of the application also provides electronic equipment, which comprises a memory and a processor, wherein the memory stores a computer program, and the processor realizes the automatic conversion method of the front end frame assembly when executing the computer program. The electronic equipment can be any intelligent terminal including a tablet personal computer, a vehicle-mounted computer and the like.

It can be understood that the content in the above method embodiment is applicable to the embodiment of the present apparatus, and the specific functions implemented by the embodiment of the present apparatus are the same as those of the embodiment of the above method, and the achieved beneficial effects are the same as those of the embodiment of the above method.

The embodiment of the application also provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the computer program realizes the automatic conversion method of the front end frame assembly when being executed by a processor.

It can be understood that the content of the above method embodiment is applicable to the present storage medium embodiment, and the functions of the present storage medium embodiment are the same as those of the above method embodiment, and the achieved beneficial effects are the same as those of the above method embodiment.

The memory, as a non-transitory computer readable storage medium, may be used to store non-transitory software programs as well as non-transitory computer executable programs. In addition, the memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, the memory optionally includes memory remotely located relative to the processor, the remote memory being connectable to the processor through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The embodiments described in the embodiments of the present application are for more clearly describing the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application, and those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are equally applicable to similar technical problems.

It will be appreciated by persons skilled in the art that the embodiments of the application shown in the figures are not limiting and that more or fewer steps than shown, or combinations of certain of the steps, may be included.

The system embodiments described above are merely illustrative, in that the units illustrated as separate components may or may not be physically separate, i.e., may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

Those of ordinary skill in the art will appreciate that all or some of the steps of the methods, systems, functional modules/units in the devices disclosed above may be implemented as software, firmware, hardware, and suitable combinations thereof.

The preferred embodiments of the present application have been described above with reference to the accompanying drawings, and are not thereby limiting the scope of the claims of the embodiments of the present application. Any modifications, equivalent substitutions and improvements made by those skilled in the art without departing from the scope and spirit of the embodiments of the present application shall fall within the scope of the claims of the embodiments of the present application.

Claims

1. A method of automatically converting a front end frame assembly, the method comprising the steps of:

Acquiring a first cascading style sheet, a hypertext markup language template and a first TYPESCRIPT code of an Angular frame assembly file;

collecting data from the first document object model tree structure object, and synchronizing the collected data to the first TYPESCRIPT codes;

carrying out grammar and semantic analysis and conversion on a first variable, a first method body and a first import sentence in the first TYPESCRIPT code respectively to correspondingly obtain a second variable, a second method body and a second import sentence;

Splicing a plurality of second method bodies, the second variables and the second import sentences to obtain a second TYPESCRIPT code which accords with the Vue frame grammar specification;

creating a Vue file, and writing the second cascading style sheet, the hypertext markup language template character string and the second TYPESCRIPT codes into corresponding tags in the Vue file according to a preset rule to obtain a Vue frame assembly file.

2. The method of claim 1, wherein the obtaining the first cascading style sheet, the hypertext markup language template, and the first TYPESCRIPT code of the Angular framework component file comprises the steps of:

acquiring a first cascading style sheet reference path, a hypertext markup language template reference path and a first TYPESCRIPT code;

3. The method according to claim 1, wherein parsing and converting the first cascading style sheet to obtain a second cascading style sheet comprises the steps of:

4. The method of claim 1, wherein said parsing and converting said hypertext markup language template to obtain a first document object model tree structure object of said hypertext markup language template comprises the steps of:

5. The method of claim 4, wherein the collecting data from the first document object model tree structure object and synchronizing the collected data to the first TYPESCRI PT code comprises the steps of:

The extracted variables and methods are synchronized into the first TYPESCRI PT code.

6. The method of claim 1, wherein the parsing and converting the first variable, the first method body, and the first import statement in the first TYPESCRI PT code to obtain a second variable, a second method body, and a second import statement, respectively, comprises the steps of:

performing type definition on a first variable in the first TYPESCRI PT codes according to a Vue variable definition rule, and analyzing the first variable by adopting corresponding analysis logic according to the type of the first variable to obtain a second variable, wherein the second variable is a Vue variable conforming to a Vue frame grammar specification;

7. The method of claim 6, wherein the concatenating the plurality of the second method body, the second variable, and the second import statement results in a second TYPESCRI PT code that conforms to a Vue frame grammar specification, comprising the steps of:

and assembling the second import statement on the second assembled code to obtain a second TYPESCRIPT code which accords with the Vue frame grammar specification.

8. A front end frame assembly automatic conversion system, the system comprising:

a first module for obtaining a first cascading style sheet, a hypertext markup language template, and a first TYPESCRIPT code of an Angular framework component file;

a fourth module, configured to collect data from the first document object model tree structure object, and synchronize the collected data to the first TYPESCRIPT codes;

a fifth module, configured to parse and convert the first variable, the first method body, and the first import sentence in the first TYPESCRIPT code to obtain a second variable, a second method body, and a second import sentence correspondingly;

A seventh module, configured to splice the plurality of second method bodies, the second variables, and the second import statements to obtain a second TYPESCRIPT code that accords with a Vue frame grammar specification;

and an eighth module, configured to create a Vue file, and write the second cascading style sheet, the hypertext markup language template string, and the second TYPESCRIPT code into corresponding tags in the Vue file according to a preset rule, so as to obtain a Vue frame assembly file.

9. An electronic device comprising a memory storing a computer program and a processor implementing the method of any of claims 1 to 7 when the computer program is executed by the processor.

10. A computer readable storage medium storing a computer program, characterized in that the computer program, when executed by a processor, implements the method of any one of claims 1 to 7.