CN111190594A

CN111190594A - Vue component document generation method and device

Info

Publication number: CN111190594A
Application number: CN201911340856.2A
Authority: CN
Inventors: 霍春阳
Original assignee: Beijing Absolute Health Ltd
Current assignee: Beijing Absolute Health Ltd
Priority date: 2019-12-23
Filing date: 2019-12-23
Publication date: 2020-05-22
Anticipated expiration: 2039-12-23
Also published as: CN111190594B

Abstract

The invention discloses a document generation method and a document generation device of an Vue component, wherein the method comprises the following steps: obtaining Vue a source code file of a component, wherein the Vue component is an abstraction unit that constitutes a page view; analyzing the source code file to generate a corresponding abstract syntax tree AST; traversing each tree node in the AST; and filling the node contents of the tree nodes in the description blocks of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relation of each object in the Vue component. By the method and the device, the technical problem that the descriptive document of the Vue component cannot be automatically generated in the related art is solved, and the output efficiency of the descriptive document is improved.

Description

Vue component document generation method and device

Technical Field

The invention relates to the field of computers, in particular to a document generation method and device of an Vue component.

Background

In the related art, Vue is a set of progressive JavaScript framework for constructing user interfaces, which is used to develop user interfaces. After a developer writes Vue a component, the component needs to be written with a corresponding document so that other developers know how to use the component.

In the related art, documentation of Vue components is done manually by developers, which is both wasteful and increases maintenance costs.

In view of the above problems in the related art, no effective solution has been found at present.

Disclosure of Invention

In order to solve the technical problem that the descriptive document of the Vue component cannot be automatically generated in the related art, the embodiment of the invention provides a document generation method and device of Vue components.

According to an embodiment of the invention, there is provided a document generation method of an Vue component, including: obtaining Vue a source code file of a component, wherein the Vue component is an abstraction unit that constitutes a page view; analyzing the source code file to generate a corresponding abstract syntax tree AST; traversing each tree node in the AST; and filling the node contents of the tree nodes in the description blocks of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relation of each object in the Vue component.

Optionally, parsing the source code file to generate a corresponding AST includes: reading a character string in the source code file; identifying character features of the character string; and generating the AST of the Vue component according to the character string and the character characteristics.

Optionally, generating the AST of the Vue component according to the character string and the character feature includes: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to one tree node.

Optionally, generating the AST of the Vue component according to the character string and the character feature includes: performing lexical analysis on the plurality of character strings in the source code file based on character features to generate a Token sequence; and carrying out syntactic analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.

Optionally, identifying the character feature of the character string includes at least one of: identifying a tips attribute of the character string; recognizing character identification of the character string; identifying annotation information for the string; identifying a type of the character string.

Optionally, filling the node content of the tree node in the description block of the preset template document according to the node type of the tree node includes: matching a target description block according to the node type of the tree node, wherein the target description block comprises one of: tips, Events, Slots, Methods, the tips, the Slots are application programming interface, API, types of functions in the Vue component, the Methods are types of calls between Methods in the Vue component; and filling the node contents of the tree nodes in the target description block.

Optionally, after generating the Vue component description document according to the AST, the method further includes: after setting the association relationship between the Vue component and the descriptive document, uploading the Vue component to a JavaScript component library.

According to another embodiment of the present invention, there is provided a document generating apparatus of the Vue component, including: an obtaining module, configured to obtain Vue a source code file of a component, where the Vue component is an abstraction unit that constitutes a page view; the analysis module is used for analyzing the source code file and generating a corresponding abstract syntax tree AST; a traversing module, configured to traverse each tree node in the AST; and the filling module is used for filling the node contents of the tree nodes in the description blocks of the preset template document according to the node types of the tree nodes to generate the Vue component description document, wherein the description document is used for recording the attribute information and the interaction relation of each object in the Vue component.

Optionally, the parsing module is specifically configured to: reading a character string in the source code file; identifying character features of the character string; and generating the AST of the Vue component according to the character string and the character characteristics.

Optionally, when the parsing module is configured to generate the AST of the Vue component according to the character string and the character feature, the parsing module is specifically configured to: generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to one tree node.

Optionally, when the parsing module is configured to generate the AST of the Vue component according to the character string and the character feature, the parsing module is specifically configured to: performing lexical analysis on the plurality of character strings in the source code file based on character features to generate a Token sequence; and carrying out syntactic analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.

Optionally, when the parsing module is configured to identify the character features of the character string, the parsing module is specifically configured to at least one of: identifying a tips attribute of the character string; recognizing character identification of the character string; identifying annotation information for the string; identifying a type of the character string.

Optionally, the filling module is specifically configured to: matching a target description block according to the node type of the tree node, wherein the target description block comprises one of: tips, Events, Slots, Methods, the tips, the Slots are application programming interface, API, types of functions in the Vue component, the Methods are types of calls between Methods in the Vue component; and filling the node contents of the tree nodes in the target description block.

Optionally, the apparatus further comprises: the uploading module is used for uploading the Vue component to a JavaScript component library after the filling module generates the descriptive document of the Vue component according to the AST and after the association relationship between the Vue component and the descriptive document is set.

According to a further embodiment of the present invention, there is also provided a storage medium having a computer program stored therein, wherein the computer program is arranged to perform the steps of any of the above method embodiments when executed.

According to yet another embodiment of the present invention, there is also provided an electronic device, including a memory in which a computer program is stored and a processor configured to execute the computer program to perform the steps in any of the above method embodiments.

According to the scheme of the embodiment, the source code file of Vue components is obtained, then the source code file is analyzed, the corresponding abstract syntax tree AST is generated, finally, the description document of Vue components is generated according to the AST, the description document of Vue components is generated based on the AST, and the description document can be automatically generated by statically analyzing the code content, so that the technical problem that the description document of Vue components cannot be automatically generated in the related art is solved, and the output efficiency of the description document is improved.

The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description, serve to explain the principles of the invention.

The invention will be more clearly understood from the following detailed description, taken with reference to the accompanying drawings, in which:

FIG. 1 is a block diagram of the hardware architecture of a document generation computer of the Vue component in accordance with an embodiment of the present invention;

FIG. 2 is a flow diagram of a document generation method of the Vue component according to an embodiment of the invention;

fig. 3 is a schematic diagram of an AST in an embodiment of the present invention;

FIG. 4 is a block diagram of a document creation apparatus of Vue components according to an embodiment of the present invention;

FIG. 5 is a block diagram of a document creation apparatus of the Vue component in one embodiment of the invention.

Detailed Description

Various exemplary embodiments of the present invention will now be described in detail with reference to the accompanying drawings. It should be noted that: the relative arrangement of the components and steps, the numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present invention unless specifically stated otherwise.

Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.

The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.

Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.

Embodiments of the invention are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the computer system/server include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set top boxes, programmable consumer electronics, network pcs, minicomputer systems, mainframe computer systems, distributed cloud computing environments that include any of the above systems, and the like.

The computer system/server may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.

The method provided by the first embodiment of the present application may be executed in a mobile terminal, a computer, a server, or a similar computing device. Taking a computer as an example, fig. 1 is a hardware structure block diagram of a document generation computer of Vue components according to an embodiment of the present invention. As shown in fig. 1, computer 10 may include one or more (only one shown in fig. 1) processors 102 (processor 102 may include, but is not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA) and a memory 104 for storing data, and optionally may also include a transmission device 106 for communication functions and an input-output device 108. It will be appreciated by those of ordinary skill in the art that the configuration shown in FIG. 1 is illustrative only and is not intended to limit the configuration of the computer described above. For example, computer 10 may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.

The memory 104 may be used for storing computer programs, for example, software programs and modules of application software, such as a computer program corresponding to the document generating method of the Vue component in the embodiment of the present invention, and the processor 102 executes various functional applications and data processing by running the computer programs stored in the memory 104, so as to implement the above-mentioned methods. The memory 104 may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, memory 104 may further include memory located remotely from processor 102, which may be connected to computer 10 via 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 transmission device 106 is used for receiving or transmitting data via a network. Specific examples of such networks may include wireless networks provided by the communications provider of computer 10. In one example, the transmission device 106 includes a Network adapter (NIC), which can be connected to other Network devices through a base station so as to communicate with the internet. In one example, the transmission device 106 may be a Radio Frequency (RF) module, which is used for communicating with the internet in a wireless manner.

In the present embodiment, an Vue component document generating method is provided, and fig. 2 is a flowchart of a Vue component document generating method according to an embodiment of the present invention, as shown in fig. 2, the flowchart includes the following steps:

step S202, a source code file of Vue components is obtained, wherein Vue components are abstract units forming a page view;

vue of the embodiment is a set of progressive JavaScript framework for constructing a user interface, Vue is designed to be applied layer by layer from bottom to top, Vue is an abstraction unit defined by Vue, and a view layer page of software is assembled by at least one Vue component.

Step S204, analyzing the source code file and generating a corresponding Abstract Syntax Tree (AST);

the abstract syntax tree in this embodiment is applicable to all types of programming languages for abstractly expressing the logical relationship of the syntax structure of the source code.

Step S206, traversing each tree node in the AST;

step S208, filling node contents of the tree nodes in the description blocks of the preset template document according to the node types of the tree nodes to generate Vue component description documents, wherein the description documents are used for recording Vue attribute information and interaction relations of each object in the component.

The description document in the present embodiment is a descriptive document of a source code file, and is used for specifically explaining and explaining the type, scope, and interactive relationship between objects (instantiations of classes) in the source code, and the like.

Through the steps, Vue component source code files are obtained, then the source code files are analyzed, corresponding abstract syntax trees AST are generated, finally all tree nodes in the AST are traversed, node contents are filled, Vue component description documents are generated based on the AST, the description documents can be automatically generated through static analysis of the code contents, the technical problem that Vue component description documents cannot be automatically generated in the related technology is solved, and the output efficiency of the description documents is improved.

The AST of this embodiment is a tree representation of an abstract syntax structure of a source code, and is used to describe a logical relationship between statements of the source code, each node on the tree represents a structure in the source code, and each AST node (tree node) corresponds to one source code item. Fig. 3 is a diagram of an AST according to an embodiment of the present invention, where the source codes are:

in this embodiment, parsing the source code file to generate the corresponding AST includes:

s11, reading character strings in the source code file;

the present embodiment may read the character string in the source code file in a recursive manner.

S12, recognizing character features of the character string;

the character features of this embodiment are used to describe attribute information and association information of a character string, and the character features for identifying the character string may be, but are not limited to: identifying a tips attribute of the character string, wherein the tips attribute is used for describing a data transfer direction between the parent component and the child component; recognizing character identification of the character string; identifying annotation information of the character string; the type of the character string is identified.

S13, an AST of Vue modules is generated from the character string and character features.

The present embodiment may generate the AST in various ways, and in one embodiment of the present embodiment, the AST generating Vue components according to character strings and character features includes: generating a Token sequence based on the character features, wherein the Token sequence comprises a plurality of character strings in the source code file; and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to one tree node.

The Token in this embodiment is a word obtained by performing similar word segmentation on a sentence of the source code of the Vue component, and the Token sequence is a word sequence composed of a plurality of words, and the word is a character string and is the minimum unit constituting the source code.

In this embodiment, the top-down AST construction process includes two types, one is a recursive subroutine method, and the other is a LL analysis method (a top-down analysis compilation method). When constructed using LL analysis, the Token sequences are executed in left-to-right order and a leftmost derivation is generated in the process, with the input Token sequences being analyzed and matched from left to right.

In another implementation of this embodiment, generating Vue the AST of the component from the character strings and character features includes: performing lexical analysis on a plurality of character strings in the source code file based on the character characteristics to generate a Token sequence; and (5) carrying out syntactic analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.

In the lexical analysis process, firstly reading in character streams forming a source code, organizing the character streams into a sequence of meaningful morphemes (lexemes) based on character features, and generating lexical units (tokens) for each morpheme, wherein the lexical analysis is to read in a source program (which can be regarded as a long character string) and to "cut" the source program into small segments (each segment is a lexical unit token), and each unit has a specific meaning, for example, a specific keyword or represents a number.

In the lexical analysis process, character string codes are read and then combined into tokens one by one according to a preset rule, meanwhile, contents such as blanks and comments can be optionally removed, and finally, the whole code is divided into a token sequence (one-dimensional array). In the process of grammar analysis, tokens analyzed by a lexical method are converted into a tree-shaped expression form, optionally, grammars can be verified, if the grammars are wrong, grammar errors are thrown out, and when a tree is generated, some unnecessary identifiers of tokens (such as incomplete brackets) are correspondingly deleted, so that the AST of the embodiment may not be completely matched with the source code.

The Vue component of the embodiment is different from other JavaScript frameworks in that an API (Application Programming Interface) of the Vue component is composed of programs, Events and Slots, and includes specific methods attributes (methods can be called by each other in a functional form), wherein the programs allow an external environment to transfer data to the component, the Events allow the component to trigger side effects (additional Events) of the external environment, and the Slots allow the external environment to combine additional content in the component. Therefore, for the tips, Events, Slots and Methods in the Vue component, corresponding description blocks can be formed in the description document, and the functions and implementation principles of the Vue component can be clearly described by extracting Vue data transmission modes, data transmission objects, function call relations and the like of the component.

In this embodiment, filling the node contents of the tree node in the description block of the preset template document according to the node type of the tree node includes: matching the target description blocks according to the node types of the tree nodes, wherein the target description blocks comprise one of the following: tips, Events, Slots, Methods, the tips, the Slots are application programming interface, API, types of functions in the Vue component, the Methods are types of calls between Methods in the Vue component; and filling node contents of the tree nodes in the target description block. Furthermore, description blocks such as attributes and the like can be included, and the following description blocks are illustrated: tips, the way data is passed from parent components to children components; slots are slots in the code script and are divided into anonymous slots, named slots and scope slots; events are self-defined Events in the code script; methods are user events in code scripts. Methods correspond to functions (functions) in Vue components, which are blocks of javascript code that can be executed, predefined by javascript program definitions or javascript implementations, which may have actual or formal arguments specifying one or more values to be used by the function to perform a computation, and which may return values to represent the results of the computation. Methods are javascript functions that are invoked by objects.

In one example, the source code is as follows:

the data structure of the AST obtained by analysis is as follows:

the description document obtained from the AST mapping includes four description blocks (tips, Events, Slots, Methods), and the codes are as follows:

#MyComponent

This is a description of the component

##Props

<！--@vuese:MyComponent:props:start-->

|---|---|---|---|---|

<！--@vuese:MyComponent:props:end-->

##Events

<！--@vuese:MyComponent:events:start-->

|Event Name|Description|Parameters|

|---|---|---|

|onclear|Fire when the form is cleared|The argument is a booleanvalue representing xxx|

<！--@vuese:MyComponent:events:end-->

##Slots

<！--@vuese:MyComponent:slots:start-->

|Name|Description|Default Slot Content|

|---|---|---|

|header|Form header|`<th>title</th>`|

<！--@vuese:MyComponent:slots:end-->

##Methods

<！--@vuese:MyComponent:methods:start-->

|Method|Description|Parameters|

|---|---|---|

|clear|Used to manually clear the form|-|

<！--@vuese:MyComponent:methods:end-->。

the scheme of the embodiment can be applied to Vue components of JavaScript, and can also be applied to Per.js files, safe.js files and the like under the condition of no contradiction.

In one embodiment of the present embodiment, after generating Vue a description document of a component according to AST, the method further includes: after setting Vue the association of the component with the descriptive document, the Vue component is uploaded to the JavaScript component library.

When the user calls the Vue component in the JavaScript component library, the associated description document can be searched through the association relation.

Through the above description of the embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.

In this embodiment, a document generating apparatus with Vue components is further provided, and the apparatus is used to implement the foregoing embodiments and preferred embodiments, and the description of which has been already made is omitted. As used below, the term "module" may be a combination of software and/or hardware that implements a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated.

Fig. 4 is a block diagram of a document creation apparatus of Vue components according to an embodiment of the present invention, and as shown in fig. 4, the apparatus includes: an acquisition module 40, a parsing module 42, a traversal module 44, a population module 46, wherein,

an obtaining module 40, configured to obtain Vue a source code file of a component, where the Vue component is an abstraction unit constituting a page view;

the parsing module 42 is configured to parse the source code file to generate a corresponding abstract syntax tree AST;

a traversal module 44 configured to traverse each tree node in the AST;

and a filling module 46, configured to fill the node content of the tree node in a description block of a preset template document according to the node type of the tree node to generate a description document of the Vue component, where the description document is used to record attribute information and an interaction relationship of each object in the Vue component.

FIG. 5 is a block diagram of a document creation apparatus of the Vue component in one embodiment of the invention, as shown in FIG. 5, the apparatus comprising: the module comprises an acquisition module 40, a parsing module 42, a traversing module 44, a filling module 46, and an uploading module 50, wherein the uploading module 50 is configured to upload the Vue component to a JavaScript component library after the filling module generates the descriptive document of the Vue component according to the AST and after the association relationship between the Vue component and the descriptive document is set.

It should be noted that, the above modules may be implemented by software or hardware, and for the latter, the following may be implemented, but not limited to: the modules are all positioned in the same processor; alternatively, the modules are respectively located in different processors in any combination.

Embodiments of the present invention also provide a storage medium having a computer program stored therein, wherein the computer program is arranged to perform the steps of any of the above method embodiments when executed.

Alternatively, in the present embodiment, the storage medium may be configured to store a computer program for executing the steps of:

s1, acquiring a source code file of Vue components, wherein the Vue components are abstract units forming a page view;

s2, analyzing the source code file to generate a corresponding abstract syntax tree AST;

s3, traversing each tree node in the AST;

s4, filling the node content of the tree node in the description block of a preset template document according to the node type of the tree node to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relation of each object in the Vue component.

Optionally, in this embodiment, the storage medium may include, but is not limited to: various media capable of storing computer programs, such as a usb disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic disk, or an optical disk.

Embodiments of the present invention also provide an electronic device comprising a memory having a computer program stored therein and a processor arranged to run the computer program to perform the steps of any of the above method embodiments.

Optionally, the electronic apparatus may further include a transmission device and an input/output device, wherein the transmission device is connected to the processor, and the input/output device is connected to the processor.

Optionally, in this embodiment, the processor may be configured to execute the following steps by a computer program:

s3, traversing each tree node in the AST;

Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments and optional implementation manners, and this embodiment is not described herein again.

In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The method and system of the present invention may be implemented in a number of ways. For example, the methods and systems of the present invention may be implemented in software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustrative purposes only, and the steps of the method of the present invention are not limited to the order specifically described above unless specifically indicated otherwise. Furthermore, in some embodiments, the present invention may also be embodied as a program recorded in a recording medium, the program including machine-readable instructions for implementing a method according to the present invention. Thus, the present invention also covers a recording medium storing a program for executing the method according to the present invention.

The description of the present invention has been presented for purposes of illustration and description, and is not intended to be exhaustive or limited to the invention in the form disclosed. Many modifications and variations will be apparent to practitioners skilled in this art. The embodiment was chosen and described in order to best explain the principles of the invention and the practical application, and to enable others of ordinary skill in the art to understand the invention for various embodiments with various modifications as are suited to the particular use contemplated.

Claims

1. A document generation method for an Vue component, comprising:

obtaining Vue a source code file of a component, wherein the Vue component is an abstraction unit that constitutes a page view;

analyzing the source code file to generate a corresponding abstract syntax tree AST;

traversing each tree node in the AST;

and filling the node contents of the tree nodes in the description blocks of a preset template document according to the node types of the tree nodes to generate a description document of the Vue component, wherein the description document is used for recording attribute information and interaction relation of each object in the Vue component.

2. The method of claim 1, wherein parsing the source code file to generate a corresponding abstract syntax tree AST comprises:

reading a character string in the source code file;

identifying character features of the character string;

and generating the AST of the Vue component according to the character string and the character characteristics.

3. The method of claim 2, wherein generating the AST of the Vue component from the character string and the character features comprises:

generating a Token sequence based on the character features, wherein the Token sequence comprises a plurality of character strings in the source code file;

and constructing the AST of the source code file from top to bottom according to the Token sequence, wherein each character string in the Token sequence corresponds to one tree node.

4. The method of claim 2, wherein generating the AST of the Vue component from the character string and the character features comprises:

performing lexical analysis on the plurality of character strings in the source code file based on the character features to generate a Token sequence;

and carrying out syntactic analysis on the Token sequence, and converting the Token of each character string into a tree expression so as to generate the AST of the source code file.

5. The method of claim 2, wherein identifying character characteristics of the string comprises at least one of:

identifying a tips attribute of the character string;

recognizing character identification of the character string;

identifying annotation information for the string;

identifying a type of the character string.

6. The method of claim 1, wherein filling the node contents of the tree node in the description block of the preset template document according to the node type of the tree node comprises:

matching a target description block according to the node type of the tree node, wherein the target description block comprises one of: tips, Events, Slots, Methods, the tips, the Slots are application programming interface, API, types of functions in the Vue component, the Methods are types of calls between Methods in the Vue component;

and filling the node contents of the tree nodes in the target description block.

7. The method of claim 1, wherein after generating the descriptive document of the Vue component in accordance with the AST, the method further comprises:

after setting the association relationship between the Vue component and the descriptive document, uploading the Vue component to a JavaScript component library.

8. An Vue component document generating apparatus, comprising:

an obtaining module, configured to obtain Vue a source code file of a component, where the Vue component is an abstraction unit that constitutes a page view;

the analysis module is used for analyzing the source code file and generating a corresponding abstract syntax tree AST;

a traversing module, configured to traverse each tree node in the AST;

and the filling module is used for filling the node contents of the tree nodes in the description blocks of the preset template document according to the node types of the tree nodes to generate the Vue component description document, wherein the description document is used for recording the attribute information and the interaction relation of each object in the Vue component.

9. The apparatus of claim 8, wherein the parsing module is specifically configured to:

reading a character string in the source code file;

identifying character features of the character string;

10. The apparatus of claim 9, wherein the parsing module, when generating the AST of the Vue component from the character string and the character features, is specifically configured to:

generating a Token sequence based on character features, wherein the Token sequence comprises a plurality of character strings in the source code file;

11. The apparatus of claim 9, wherein the parsing module, when generating the AST of the Vue component from the character string and the character features, is specifically configured to:

performing lexical analysis on the plurality of character strings in the source code file based on character features to generate a Token sequence;

12. The apparatus according to claim 9, wherein the parsing module is configured to, when identifying the character feature of the character string, specifically at least one of:

identifying a tips attribute of the character string;

recognizing character identification of the character string;

identifying annotation information for the string;

identifying a type of the character string.

13. The apparatus according to claim 8, wherein the filling module is specifically configured to:

14. The apparatus of claim 8, further comprising:

the uploading module is used for uploading the Vue component to a JavaScript component library after the filling module generates the descriptive document of the Vue component according to the AST and after the association relationship between the Vue component and the descriptive document is set.