A method, device and application for real-time display of UI library component effects based on Vue

Abstract

This application proposes a method, device and application for real-time display of UI library component effects based on Vue, including the following steps: obtaining the user's code input, parsing the code input using a string code parsing tool, and connecting to the corresponding UI component library based on the user's code input, parsing the user's code input using a template parsing tool, a script parsing tool, and a style parsing tool to obtain template parsing code, script parsing code, and style parsing code; merging the template parsing code, script parsing code, and style parsing code through the createAPP method of the Vue framework to obtain a mounting display code, and the createAPP mounts the mounting display code on a web page for effect display. This solution can view the effect of the UI component based on the input code, and when the code is modified, the modified effect can be displayed in real time on the page.

Description

Technical Field

[0001] The present application relates to the field of front-end technology, and in particular to a method, device and application for real-time display of UI library component effects based on Vue. Background Art

[0002] With the continuous upgrades and expansion of the Vue framework in web front-end development, developers have more choices for Vue-based UI frameworks. However, due to the different implementation concepts of different UI frameworks, the usage of components within the frameworks has also become very different. Without detailed documentation for framework component usage, developers have to spend more time and energy to familiarize themselves with the components and how to use them. This also prevents developers from focusing on business function implementation, which has a significant impact on development efficiency.

[0003] Although there are existing technical solutions for the use of various component frameworks, such as Vue SFC Playground, this solution is implemented by entering Vue code into the code editing box on the web side, parsing the code into browser-parseable code using a code parsing method, and finally outputting it to the page, thereby realizing online code editing and real-time effect display. However, the online editor of this solution can only parse the component code generated during online editing, and cannot parse the component code of the UI component library. In addition, the online editor of this solution cannot provide code highlighting and error prompt effects. This requires developers to focus on how to ensure the correctness of the code when using the editor, which greatly reduces development efficiency.

[0004] In addition, there is a live server method, which sends a refresh request to the browser through a websocker connection to refresh the browser page, thereby achieving the purpose of updating the UI components. In other words, the live server uses the browser behavior to reload resources, and this resource can only exist in the current project, and cannot dynamically load UI components from an external component library.

[0005] To sum up, there is an urgent need for a code editor that can provide code highlighting and error prompts to ensure that the code is input correctly, a method that can parse the code of the Vue-based UI component library, and realize the conversion of component code to component effect by parsing the input code, and the solution itself should be cross-platform. Summary of the Invention

[0006] The embodiments of the present application provide a method, device and application for real-time display of UI library component effects based on Vue, which can display the UI component effects on the page in real time according to the input UI component code.

[0007] In a first aspect, an embodiment of the present application provides a method for real-time display of UI library component effects based on Vue, the method comprising:

[0008] Obtain the user's code and use a string code parsing tool to split the code into three code strings: template, script, and style.

[0009] Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags;

[0010] Use the template parsing tool to parse the styles and events bound in the code string of the template part to obtain the template parsing code; use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code;

[0011] The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP. Then, according to the UI component tag in the mounting display code, the UI component in the corresponding UI component library is called, and its effect is displayed on the web page.

[0012] On the second aspect, an embodiment of the present application provides a real-time display tool for UI library component effects based on Vue, including a code editor and an effect display box. The user enters code in the code editor, and after the input code is processed using the method of embodiment one, the code effect is displayed in real time in the effect display box.

[0013] In a third aspect, an embodiment of the present application provides a real-time display device for UI library component effects based on Vue, comprising:

[0014] Acquisition module: obtains the user's code and uses a string code parsing tool to split the code into three code strings: template, script, and style;

[0015] Connection module: Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags;

[0016] Parsing module: Use the template parsing tool to parse the styles and events bound in the code string of the template part to obtain the template parsing code; use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code;

[0017] Mounting module: The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP, and then the UI component in the corresponding UI component library is called according to the UI component tag in the mounting display code, and its effect is displayed on the web page.

[0018] In a fourth aspect, an embodiment of the present application provides an electronic device comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to provide a real-time display method of UI library component effects based on Vue or a real-time display tool of UI library component effects based on Vue.

[0019] In a fifth aspect, an embodiment of the present application provides a readable storage medium, in which a computer program is stored. The computer program includes a program code for controlling a process to execute a process, and the process includes a real-time display method of UI library component effects based on Vue or a real-time display tool of UI library component effects based on Vue.

[0020] The main contributions and innovations of the present invention are as follows:

[0021] The embodiment of the present application can automatically parse the input code, identify the UI component tags therein, and connect the UI component library through the UI component tags. After the UI component library is connected, the effect of the input code is displayed in real time on the page by mounting, and the component code of the UI component library can be parsed and displayed in real time.

[0022] At the same time, developers can make changes to the code online, and when making changes to the code, the effect of the changed code can be displayed in real time. This solution proposes a real-time display method for UI library component effects based on Vue. It can realize the conversion between component code and component effect by parsing the input code without refreshing the browser. It does not use browser behavior and is not limited by project resources. It can call components from any component library and is cross-platform. The code editor used in this solution provides partial code highlighting and code error prompt functions, thereby ensuring the correctness of the code and improving the development efficiency of developers.

[0023] The details of one or more embodiments of the present application are set forth in the following drawings and description to make other features, objects, and advantages of the present application more readily apparent. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0025] Figure 1 This is a flow chart of a method for real-time display of UI library component effects based on Vue according to an embodiment of the present application;

[0026] Figure 2 This is a flow chart of a method for real-time display of UI library component effects based on Vue according to an embodiment of the present application;

[0027] Figure 3 This is a schematic diagram of a UI component library processing method according to an embodiment of the present application;

[0028] Figure 4 This is a schematic diagram of a process for processing an input code according to an embodiment of the present application;

[0029] Figure 5 This is a structural diagram of a real-time display tool for UI library component effects based on Vue according to an embodiment of the present application;

[0030] Figure 6 It is a flowchart of using the real-time display tool of the UI library component effect based on Vue;

[0031] Figure 7 This is a structural block diagram of a real-time display device for UI library component effects based on Vue according to an embodiment of the present application;

[0032] Figure 8 Schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0033] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The implementations described in the following exemplary embodiments are not intended to represent all implementations consistent with one or more embodiments of this specification. Rather, they are merely examples of apparatuses and methods consistent with certain aspects of one or more embodiments of this specification, as detailed in the appended claims.

[0034] It should be noted that in other embodiments, the steps of the corresponding method are not necessarily performed in the order shown and described in this specification. In some other embodiments, the method may include more or fewer steps than those described in this specification. In addition, a single step described in this specification may be broken down into multiple steps for description in other embodiments, and multiple steps described in this specification may be combined into a single step for description in other embodiments.

[0035] To facilitate understanding of this solution, the terms mentioned in this solution are explained here:

[0036] Vue: is a progressive framework for building user interfaces;

[0037] @vue / compiler-sfc: A tool for pre-compiling single-file components into standard JavaScript and CSS.

[0038] UI component library: A component library based on Vue that can be used to quickly develop and build websites.

[0039] Example 1

[0040] The embodiment of the present application provides a method for real-time display of UI library component effects based on Vue, which can realize the real-time display of component effects in the UI library on the same page when modifying the code. Specifically, refer to Figure 1 , the method comprising:

[0041] Obtain the user's code and use a string code parsing tool to split the code into three code strings: template, script, and style.

[0042] Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags;

[0043] Use the template parsing tool to parse the styles and events bound in the code string of the template part to obtain the template parsing code; use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code;

[0044] The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP. Then, according to the UI component tag in the mounting display code, the UI component in the corresponding UI component library is called, and its effect is displayed on the web page.

[0045] In a specific embodiment, the flowchart of the method for real-time display of UI library component effects based on Vue is as follows: Figure 2 As shown, this solution is suitable for processing the code of a Vue single-file component consisting of template, style, and script, and the UI component library can only be developed through VUE.

[0046] Specifically, the string parsing tool can only be used to process Vue single-file components consisting of template part code, style part code and script part code.

[0047] In some embodiments, in the step of "establishing a connection with the corresponding UI component library through the UI component tag", the library name of the UI component tag is matched to the corresponding UI component library, and the UI component library address where the UI component library is located is returned, and then the UI component library address is packaged into a request link and inserted into the web page to complete the connection. The UI component tag contains the UI component library name.

[0048] In this solution, a UI component library installation tool is used to match the library name of the UI component tag to the corresponding UI component library, and return the UI component library address where the UI component library is located; a UI component library import tool is used to package the UI component library address into a request link and insert it into the web page to complete the connection. The UI component library installation tool includes a mapping relationship between each UI component library name in the UI component tag and the corresponding UI component library.

[0049] Exemplarily, the UI component tag may have two forms, one is a tag code separated by “-”, such as “el-message”, and the other is a tag code named in camel case, such as “ELMessage”.

[0050] Furthermore, in the step of "packaging the UI component library address into a request link and inserting it into the web page to complete the connection", the UI component library address is spliced ​​to obtain a request link that can initiate a browser resource loading request, and the request link is inserted into the header tag of the web page document in the form of a script, and the style file of the UI component corresponding to the UI component tag is introduced into the web page document.

[0051] Specifically, the style file of the UI component corresponding to the UI component tag is a file that controls the display style of the components in the UI component library on the web page, and is provided by the UI component library.

[0052] Specifically, the link that can initiate the browser resource loading request is inserted into the header tag of the webpage document in the form of a script through the API interface provided by the javascript script.

[0053] Exemplarily, the UI component library processing method is as follows Figure 3 As shown, the UI component tag identification tool is first used to identify the three parts of the code: template, script, and style. Then, the library name is matched with the identified UI component tags through the UI component library installation tool. Finally, the UI component library import tool is used to splice the UI component library address to obtain a link that can initiate a browser resource loading request.

[0054] In some embodiments, in the step of "using a string code parsing tool to split the code into three code strings: template, script, and style", the style part code contains style tag content, the script part code contains related event code, and the template part code contains style code and UI component label string.

[0055] Specifically, the content of the style tag is used to represent the style description of the page, the script part of the code is JavaScript format code, the JavaScript format code contains event code, and the event code is used to represent the event occurring in the page. The UI component library tag string in the template part of the code contains the UI component library name, which is used to call the UI component in the corresponding UI component library. The style code in the template part of the code is used to specifically refine the content of the style tag.

[0056] For example, the content of the style tag is used to indicate that the page uses a blue square or a red square. The UI component tag is used to call the components in the Vuetify component library and determine the form in which the template code is rendered and displayed on the page. The style code is used to determine the size and rotation angle of the blue square. The event code is used to determine what effect should occur when the mouse is clicked on the page or the page is scrolled with the scroll wheel.

[0057] In some embodiments, the template parsing method receives the template part code as a parameter and returns a function text with a render function; the script parsing method receives the script part code and returns a function text with a script function; the style parsing method receives the style part code and returns a string containing the UI component style.

[0058] Specifically, the template parsing method, script parsing method, and style parsing method are all centered on the compileStyle method. The compileStyle method is provided by the Vue framework core compilation plug-in @vue / compiler-sfc, which is used to compile the template part code, script part code, and style part code.

[0059] Exemplarily, the template parsing method parses the style code and UI library component tag string in the template part code to obtain a function text with a render function, and the style code and UI library component tag string are the HTML tags for rendering and displaying on the page; the script parsing method parses the JavaScript format code in the script part code, extracts the event code in the JavaScript format code, and packages the event code into a script function text, and uses the script function text as the parsing result; the style parsing method parses the style tag content in the style part code to obtain JavaScript code.

[0060] In some embodiments, the createAPP method receives the template parsing code, script parsing code, and style parsing code, and converts the template parsing code and the script parsing code into executable JavaScript code, passes the template parsing code, script parsing code, and style parsing code to the createAPP method, and the createAPP method merges the template parsing code, script parsing code, and style parsing code to obtain a mount display code, and passes the page id as a parameter into the mount function of the mount display code, calls the mount function in the mount display code, and displays the page effect on the corresponding web page according to the page id in the mount function.

[0061] Specifically, such as Figure 4 As shown, the code input is first split into three parts of code: template, script, and style through the string code parsing tool, and then the template parsing tool, script parsing tool, and style parsing tool are used to parse the three parts of code respectively, and finally mounted on the page through the createAPP method.

[0062] Specifically, the createAPP method is provided by the vue framework. The template parsing code received by the createAPP method is a function text with a render function, the script parsing code received is a function text with a script function, and the style parsing code received is a JavaScript text. After the template parsing code and the script parsing code are converted into executable JavaScript code by calling JavaScript's eval function, the template parsing code, the script parsing code and the style parsing code are merged to obtain the mounting display code.

[0063] Specifically, the style parsing code creates a style tag in the page document through JavaScript, and inserts the style parsing code into the created style tag for rendering and display.

[0064] Specifically, the page ID is an identifier of a page that needs to be rendered.

[0065] Example 2

[0066] Based on the real-time display method of UI library component effects based on vue proposed in embodiment 1, this application also proposes a real-time display tool of UI library component effects based on vue, such as Figure 5As shown, it includes a code editor and an effect display box. The user enters code in the code editor. After the input code is processed using the method of embodiment 1, the code effect is displayed in real time in the effect display box.

[0067] Specifically, the method for displaying the code effect in real time in the effect display frame is the same as that in the first embodiment, and will not be repeated here.

[0068] In some embodiments, the application system architecture diagram of the Vue-based UI library component effect real-time display tool is as shown in the figure. The Vue-based UI library component effect real-time display tool runs on the web page 102 of the browser 101. When the user enters code in the code editor 104, the code effect is displayed in real time in the effect display box 103.

[0069] Specifically, such as Figure 6 As shown, a code correction component is added to the code editor. The code correction component can prompt the vue code errors in the code editor and highlight the syntax in the vue code to facilitate users to change the code.

[0070] Example 3

[0071] Based on the same concept, Figure 7 , the present application also proposes a data storage device, comprising:

[0072] Acquisition module: obtains the user's code and uses a string code parsing tool to split the code into three code strings: template, script, and style;

[0073] Connection module: Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags;

[0074] Parsing module: Use the template parsing tool to parse the styles and events bound in the code string of the template part to obtain the template parsing code; use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code;

[0075] Mounting module: The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP, and then the UI component in the corresponding UI component library is called according to the UI component tag in the mounting display code, and its effect is displayed on the web page.

[0076] Example 4

[0077] This embodiment also provides an electronic device, referring to Figure 8 , includes a memory 404 and a processor 402, wherein the memory 404 stores a computer program, and the processor 402 is configured to run the computer program to perform the steps in any of the above method embodiments.

[0078] Specifically, the processor 402 may include a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.

[0079] Among them, the memory 404 may include a large-capacity memory 404 for data or instructions. By way of example and not limitation, the memory 404 may include a hard disk drive (HDD), a floppy disk drive, a solid-state drive (SSD), a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive, or a combination of two or more of these. Where appropriate, the memory 404 may include a removable or non-removable (or fixed) medium. Where appropriate, the memory 404 may be inside or outside the data processing device. In a specific embodiment, the memory 404 is a non-volatile memory. In a specific embodiment, the memory 404 includes a read-only memory (ROM) and a random access memory (RAM). Where appropriate, the ROM may be a mask-programmed ROM, a programmable ROM (Programmable Read-Only Memory, abbreviated as PROM), an erasable PROM (Erasable Programmable Read-Only Memory, abbreviated as EPROM), an electrically erasable PROM (Electrically Erasable Programmable Read-Only Memory, abbreviated as EEPROM), an electrically alterable ROM (Electrically Alterable Read-Only Memory, abbreviated as EAROM) or a flash memory (FLASH) or a combination of two or more of these. In appropriate circumstances, the RAM can be a static random access memory (SRAM) or a dynamic random access memory (DRAM), wherein the DRAM can be a fast page mode dynamic random access memory 404 (FPMDRAM), an extended data output dynamic random access memory (EDODRAM), a synchronous dynamic random access memory (SDRAM), etc.

[0080] The memory 404 may be used to store or cache various data files required for processing and / or communication, as well as possible computer program instructions executed by the processor 402 .

[0081] The processor 402 reads and executes the computer program instructions stored in the memory 404 to implement a real-time display method of a UI library component effect based on Vue in the above embodiment.

[0082] Optionally, the electronic device may further include a transmission device 406 and an input / output device 408 , wherein the transmission device 406 is connected to the processor 402 , and the input / output device 408 is connected to the processor 402 .

[0083] Transmission device 406 can be used to receive or send data via a network. Specific examples of the aforementioned network may include a wired or wireless network provided by a communications provider of the electronic device. In one embodiment, the transmission device includes a network interface controller (NIC), which can be connected to other network devices via a base station to enable communication with the Internet. In one embodiment, transmission device 406 can be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0084] The input / output device 408 is used to input or output information. In this embodiment, the input information may be a code input by a user, and the output information may be a code display result.

[0085] Optionally, in this embodiment, the processor 402 may be configured to execute the following steps through a computer program:

[0086] S101. Obtain the user's code and use a string code parsing tool to split the code into three code strings: template, script, and style.

[0087] S102: using a UI component tag recognition tool to respectively recognize the code strings of the template part, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags;

[0088] S103. Use a template parsing tool to parse the styles and events bound in the code string of the template portion to obtain a template parsing code; use a script parsing tool to extract the relevant UI component library string in the code string of the script portion to obtain a script parsing code; use a style parsing tool to convert the style tag content in the code string of the style portion to obtain a style parsing code;

[0089] S104. The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP. Then, according to the UI component tag in the mounting display code, the UI component in the corresponding UI component library is called, and its effect is displayed on the web page.

[0090] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementation modes, and this embodiment will not be repeated here.

[0091] In general, various embodiments may be implemented in hardware or dedicated circuitry, software, logic, or any combination thereof. Some aspects of the invention may be implemented in hardware, while other aspects may be implemented in firmware or software that may be executed by a controller, microprocessor, or other computing device, but the invention is not limited thereto. Although various aspects of the invention may be shown and described as block diagrams, flow charts, or using some other graphical representation, it should be understood that, as non-limiting examples, the blocks, devices, systems, techniques, or methods described herein may be implemented in hardware, software, firmware, dedicated circuitry or logic, general-purpose hardware or a controller or other computing device, or some combination thereof.

[0092] The embodiments of the present invention may be implemented by computer software that is executable by a data processor of a mobile device, such as in a processor entity, or by hardware, or by a combination of software and hardware. Computer software or programs (also referred to as program products) including software routines, applets and / or macros may be stored in any device-readable data storage medium, and they include program instructions for performing specific tasks. A computer program product may include one or more computer executable components that are configured to perform an embodiment when the program is run. One or more computer executable components may be at least one software code or a portion thereof. In addition, it should be noted at this point that, for example, Figure 8Any block of the logic flow in the program may represent program steps, or interconnected logic circuits, blocks and functions, or a combination of program steps and logic circuits, blocks and functions. The software may be stored on physical media such as memory chips or memory blocks implemented within the processor, magnetic media such as hard disks or floppy disks, and optical media such as, for example, DVDs and their data variants, CDs, etc. Physical media are non-transitory media.

[0093] Those skilled in the art should understand that the technical features of the above embodiments can be combined arbitrarily. In order to make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0094] The above embodiments merely illustrate several embodiments of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present application. It should be noted that a person of ordinary skill in the art may make various modifications and improvements without departing from the spirit of the present application, all of which fall within the scope of protection of the present application. Therefore, the scope of protection of the present application shall be determined by the appended claims.

Claims

1. A real-time display method for UI library component effects based on Vue, characterized in that: include: Obtain the user's code and use a string code parsing tool to split the code into three code strings: template, script, and style. Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags; Use the template parsing tool to parse the styles and events bound in the code string of the template part to obtain the template parsing code; Use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; Use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code; The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP. Then, according to the UI component tag in the mounting display code, the UI component in the corresponding UI component library is called, and its effect is displayed on the web page.

2. A method for real-time display of UI library component effects based on Vue according to claim 1, characterized in that: In the step of "establishing a connection with the corresponding UI component library through the UI component tag", the library name of the UI component tag is matched to the corresponding UI component library, and the UI component library address where the UI component library is located is returned. The UI component library address is then packaged into a request link and inserted into the web page to complete the connection. The UI component tag includes the UI component library name.

3. A method for real-time display of UI library component effects based on Vue according to claim 2, characterized in that: In the step of "packaging the UI component library address into a request link and inserting it into the web page to complete the connection", the UI component library addresses are spliced ​​to obtain a request link that can initiate a browser resource loading request, and the request link is inserted into the header tag of the web page document in the form of a script, and the style file of the UI component corresponding to the UI component tag is introduced into the web page document.

4. A method for real-time display of UI library component effects based on Vue according to claim 1, characterized in that: In the step of "using a string code parsing tool to split the code into three code strings: template, script, and style", the style code contains the style tag content, the script code contains related event codes, and the template code contains style codes and UI component tag strings.

5. A method for real-time display of UI library component effects based on Vue according to claim 1, characterized in that: The template parsing tool receives the template part code as a parameter and returns a function text with a render function as a template parsing code. The script parsing tool receives the script part code and returns a function text with a script function as a script parsing code. The style parsing tool receives the style part code and returns a string containing the UI component style as a style parsing code.

6. A method for real-time display of UI library component effects based on Vue according to claim 1, characterized in that: The createAPP method receives the template parsing code, script parsing code, and style parsing code, and converts the template parsing code and the script parsing code into executable JavaScript code, passes the template parsing code, script parsing code, and style parsing code to the createAPP method, and the createAPP method merges the template parsing code, script parsing code, and style parsing code to obtain a mounting display code, and passes the page id as a parameter into the mount function of the mounting display code, calls the mount function in the mounting display code, and displays the page effect on the corresponding web page according to the page id in the mount function.

7. A real-time display tool for UI library component effects based on Vue, including a code editor and an effect display box. The user enters code in the code editor, and after the input code is processed using the method described in any one of claims 1-6, the code effect is displayed in real time in the effect display box.

8. A real-time display device for UI library component effects based on Vue, characterized in that: include: Acquisition module: obtains the user's code and uses a string code parsing tool to split the code into three code strings: template, script, and style; Connection module: Use the UI component tag recognition tool to identify the code strings of the template part respectively, obtain the UI component tags contained in the code strings of the template part, and establish a connection with the corresponding UI component library through the UI component tags; Parsing module: Use template parsing tools to parse the styles and events bound in the code string of the template part to obtain the template parsing code; Use the script parsing tool to extract the relevant UI component library string in the code string of the script part to obtain the script parsing code; Use the style parsing tool to convert the style tag content in the code string of the style part to obtain the style parsing code; Mounting module: The template parsing code, the script parsing code, and the style parsing code are merged through the createAPP method of the Vue framework to obtain the mounting display code, and the mounting display code is mounted on the web page through the createAPP, and then the UI component in the corresponding UI component library is called according to the UI component tag in the mounting display code, and its effect is displayed on the web page.

9. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to run the computer program to execute the real-time display method of UI library component effects based on Vue as described in any one of claims 1-6.

10. A readable storage medium, characterized in that: The readable storage medium stores a computer program, which includes a program code for controlling a process to execute a process, and the process includes a method for real-time display of UI library component effects based on Vue according to any one of claims 1-6.

Images