Component library generation method, device, electronic device, storage medium and product

Abstract

The present application provides a method, device, electronic device, storage medium and product for generating a component library. The method includes: receiving a component library generation request; determining multiple target style types corresponding to target application scenario information, and multiple candidate components corresponding to the multiple target style types; inputting the multiple candidate components into a recognition model respectively to obtain multiple candidate component information, wherein the recognition model is obtained by model training of multiple historical components; screening and processing the multiple candidate components according to the candidate component information to obtain multiple target components; generating a target component library according to the multiple target components and the multiple target component information corresponding to the multiple target components. In the above scheme, the target component library includes automatically generating target component information through the recognition model, and developers can accurately select appropriate components from the target component library according to the target component information, thereby improving the reliability of the page developed according to the selected components.

Description

Technical Field

[0001] The present application relates to the field of application development technology, and in particular to a method, device, electronic device, storage medium and product for generating a component library. Background Art

[0002] Multiple components of the front-end page can effectively display content and realize user interaction. With the rapid development of software technology, higher requirements are put forward for the page development of the front-end page, such as component layout requirements, style requirements, or interaction logic requirements.

[0003] In the related art, components are selected manually and layout is performed according to the selected components to achieve page development.

[0004] However, manual page development may result in poor component consistency, leading to low page reliability. Summary of the invention

[0005] The present application provides a component library generation method, device, electronic device, storage medium and product to improve the reliability of page development.

[0006] In a first aspect, the present application provides a method for generating a component library, comprising: receiving a component library generation request, the component library generation request including target application scenario information of a target component library; determining, according to the component library generation request, a plurality of target style types corresponding to the target application scenario information, and a plurality of candidate components corresponding to the plurality of target style types; inputting the plurality of candidate components into a recognition model respectively to obtain a plurality of candidate component information, wherein the recognition model is obtained by performing model training on a plurality of historical components; screening the plurality of candidate components according to the plurality of candidate component information to obtain a plurality of target components; generating the target component library according to the plurality of target components and the plurality of target component information corresponding to the plurality of target components.

[0007] Optionally, the method as described above determines multiple target style types corresponding to the target application scenario information, and multiple candidate components corresponding to the multiple target style types, including: extracting target keywords from the target application scenario information through natural language processing technology; determining a first correspondence between keywords and style types, and a style library; determining the multiple target style types from the style library based on the target keywords and the first correspondence; and determining the multiple candidate components based on the multiple target style types.

[0008] Optionally, the method as described above determines the multiple components to be selected based on the multiple target style types, including: determining multiple initial components, and multiple initial style types corresponding to the multiple initial components; determining, from the multiple initial components, multiple component groups corresponding to the multiple target style types based on the multiple target style types and the multiple initial style types, each component group includes multiple components, and the number of components in each component group is greater than or equal to a quantity threshold; determining that the multiple components to be selected include multiple components in the multiple component groups.

[0009] Optionally, in the method as described above, the candidate component information includes multiple component interaction logics corresponding to the multiple candidate components; the multiple candidate components are screened and processed according to the candidate component information to obtain multiple target components, including: creating multiple candidate test cases corresponding to the multiple candidate components according to the multiple component interaction logics; testing through the multiple candidate test cases to obtain multiple test results, the test results including test pass or test fail; determining multiple target test cases from the multiple candidate test cases according to the multiple test results, the test results corresponding to the multiple target test cases are all test pass; and determining the candidate components corresponding to the multiple target test cases as the multiple target components.

[0010] Optionally, the method as described above creates multiple test cases to be selected corresponding to the multiple components to be selected according to the multiple component interaction logics, including: determining multiple test case templates according to the multiple component interaction logics; determining a second correspondence between the multiple components to be selected and the multiple test case templates; and generating the multiple test cases to be selected according to the second correspondence, the multiple components to be selected, and the multiple test case templates.

[0011] Optionally, the method as described above generates the target component library based on the multiple target components and the multiple target component information corresponding to the multiple target components, including: obtaining historical usage records of the multiple target components; determining multiple target documents corresponding to the multiple target components based on the historical usage records, the target documents including at least one of the following: component usage methods, component design principles; generating the target component library based on the multiple target components, the multiple target component information corresponding to the multiple target components, and the multiple target documents.

[0012] In a second aspect, the present application provides a device for generating a component library, comprising: a receiving module for receiving a component library generation request, the component library generation request including target application scenario information of a target component library; an analyzing module for determining, according to the component library generation request, a plurality of target style types corresponding to the target application scenario information, and a plurality of candidate components corresponding to the plurality of target style types; an input module for inputting the plurality of candidate components into a recognition model respectively to obtain a plurality of candidate component information, wherein the recognition model is obtained by model training on a plurality of historical components; a screening module for screening the plurality of candidate components according to the plurality of candidate component information to obtain a plurality of target components; a generating module for generating the target component library according to the plurality of target components and the plurality of target component information corresponding to the plurality of target components.

[0013] Optionally, in the device as described above, the analysis module is specifically used to extract target keywords from the target application scenario information through natural language processing technology; the analysis module is also specifically used to determine a first correspondence between keywords and style types, and a style library; the analysis module is also specifically used to determine the multiple target style types from the style library based on the target keywords and the first correspondence; the analysis module is also specifically used to determine the multiple components to be selected based on the multiple target style types.

[0014] Optionally, in the device as described above, the analysis module is specifically used to determine multiple initial components and multiple initial style types corresponding to the multiple initial components; the analysis module is also specifically used to determine, based on the multiple target style types and the multiple initial style types, multiple component groups corresponding to the multiple target style types from the multiple initial components, each component group includes multiple components, and the number of components in each component group is greater than or equal to a quantity threshold; the analysis module is also specifically used to determine that the multiple selected components include multiple components in the multiple component groups.

[0015] Optionally, in the device as described above, the component information to be selected includes multiple component interaction logics corresponding to the multiple components to be selected; the device also includes: an execution module, used to create multiple test cases to be selected corresponding to the multiple components to be selected according to the multiple component interaction logics; the execution module is also used to test through the multiple test cases to obtain multiple test results, and the test results include test pass or test fail; the execution module is also used to determine multiple target test cases from the multiple test cases to be selected according to the multiple test results, and the test results corresponding to the multiple target test cases are all test pass; the execution module is also used to determine the components to be selected corresponding to the multiple target test cases as the multiple target components.

[0016] Optionally, in the device as described above, the execution module is specifically used to determine multiple test case templates based on the interaction logic of the multiple components; the execution module is also specifically used to determine a second corresponding relationship between the multiple components to be selected and the multiple test case templates; the execution module is also specifically used to generate the multiple test cases to be selected based on the second corresponding relationship, the multiple components to be selected, and the multiple test case templates.

[0017] Optionally, as described above, the device further comprises: an adding module for obtaining historical usage records of the multiple target components; the adding module is further used to determine multiple target documents corresponding to the multiple target components based on the historical usage records, the target documents comprising at least one of the following: component usage methods, component design principles; the adding module is further used to generate the target component library based on the multiple target components, multiple target component information corresponding to the multiple target components, and the multiple target documents.

[0018] In a third aspect, the present application provides an electronic device comprising: a processor, and a memory communicatively connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement any method described in the first aspect.

[0019] In a fourth aspect, the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are executed by a processor as described in any one of the methods in the first aspect.

[0020] In a fifth aspect, the present application provides a computer program product, comprising a computer program, wherein the computer program is executed by a processor as in any one of the methods in the first aspect.

[0021] The present application provides a method, device, electronic device, storage medium and product for generating a component library, the method comprising: receiving a component library generation request, the component library generation request including target application scenario information of a target component library; determining multiple target style types corresponding to the target application scenario information and multiple candidate components corresponding to the multiple target style types according to the component library generation request; inputting the multiple candidate components into a recognition model respectively to obtain multiple candidate component information, the recognition model being obtained by model training of multiple historical components; screening and processing the multiple candidate components according to the candidate component information to obtain multiple target components; generating the target component library according to the multiple target components and multiple target component information corresponding to the multiple target components. In the above scheme, the target component library includes automatically generating target component information through the recognition model, and developers can accurately select appropriate components from the target component library according to the target component information, thereby improving the reliability of the page developed according to the selected components. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0023] Figure 1 A schematic diagram of an application scenario of a method for generating a component library provided in an embodiment of the present application;

[0024] Figure 2 A schematic diagram of a flow chart of a method for generating a component library provided in an embodiment of the present application;

[0025] Figure 3 A schematic diagram of a flow chart of a method for generating a component library provided in an embodiment of the present application;

[0026] Figure 4 A schematic diagram of obtaining a component to be selected provided in an embodiment of the present application;

[0027] Figure 5 A schematic diagram of generating test cases to be selected provided in an embodiment of the present application;

[0028] Figure 6 A schematic diagram of generating a component library provided in an embodiment of the present application;

[0029] Figure 7 A schematic diagram of the structure of a device for generating a component library provided in an embodiment of the present application;

[0030] Figure 8 A schematic diagram of the structure of a device for generating a component library provided in an embodiment of the present application;

[0031] Fig. 9A schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0032] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0033] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0034] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use, processing, transmission, provision, disclosure and application of the relevant data comply with the relevant laws, regulations and standards of the relevant countries and regions, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0035] It should be noted that the generation method, device, electronic device, storage medium and product of the component library of the present application can be used in the field of application development technology, and can also be used in any field other than application development. The application field of the generation method, device, electronic device, storage medium and product of the component library of the present application is not limited.

[0036] Figure 1 A schematic diagram of an application scenario of a method for generating a component library provided in an embodiment of the present application is given as an example in combination with the illustrated scenario: the component library includes multiple developed components, multiple required components are selected from the component library, and the selected multiple components are combined and arranged to obtain page 1.

[0037] In the related art, after the component development is completed, the component is directly stored in the component library. When developing a page, the developer selects components from the component library according to the page requirements. The process of the developer selecting components is limited by subjective factors or experience knowledge, and there may be problems such as inconsistent styles of the selected components and the inability of the selected components to interact with each other, which leads to low reliability of the developed page.

[0038] Combined with the scenario example, the page can be applied in multiple application scenarios, and each application scenario is adapted to the corresponding style. If the page includes multiple different styles, on the one hand, there will be visual inconsistencies, and on the other hand, different styles will increase the page loading time and rendering time, resulting in low page reliability.

[0039] The method for generating a component library provided in this application is intended to solve the above technical problems in the prior art.

[0040] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0041] Figure 2 A schematic diagram of a method for generating a component library provided in an embodiment of the present application, the method comprising the following steps:

[0042] S201. Receive a component library generation request, where the component library generation request includes target application scenario information of a target component library.

[0043] The target component library is the component library generated by the component library generation request target. The target application scenario information includes the scenario of the target component library application.

[0044] Optionally, the application scenario may include different application scenario types according to different classifications. For example, the application scenario types may be divided into e-commerce websites, enterprise management systems, or social platforms according to the project. The application scenario types may be divided into desktop, mobile, or tablet computers according to the device of the page application. The application scenario types may be divided into form verification, data display, or user authentication according to functional requirements.

[0045] For example, corresponding component libraries are determined for different application scenario types. The components in each component library are used to generate pages of the corresponding application scenario type. By classifying the component libraries, developers can quickly determine the corresponding component library according to page requirements, thereby improving development efficiency.

[0046] S202: Determine, according to a component library generation request, a plurality of target style types corresponding to the target application scenario information and a plurality of candidate components corresponding to the plurality of target style types.

[0047] The multiple target styles are all style types that are adapted to the target application scenario information corresponding to the target application scenario information. Any candidate component corresponds to one of the multiple target style types.

[0048] Optionally, the style type may be classified according to multiple dimensions, including but not limited to at least one of the following: component function, visual style, color scheme, font design, or responsive design.

[0049] Further, optionally, the component functions include but are not limited to at least one of the following: a general component, a layout component, a navigation component, a data entry component, a data display component, or a feedback component.

[0050] Combined with the scenario example description, multiple target style types are determined according to the target application scenario information, and multiple candidate components determined according to the multiple target style types are all adapted to the target application scenario, so that the developer can accurately select the adapted component.

[0051] S203, inputting the multiple candidate components into the recognition model respectively to obtain the multiple candidate component information, wherein the recognition model is obtained by training the multiple historical components.

[0052] Optionally, the component information to be selected includes but is not limited to at least one of the following: component interaction logic, component type, or component application programming interface (Application Programming Interface, API for short), etc.

[0053] For example, the candidate component information can enable developers to accurately understand how to use each candidate component.

[0054] Combined with the scenario example, through the recognition model, multiple candidate components can be quickly identified, which can reduce manual work and effectively improve the efficiency of generating component libraries.

[0055] Optionally, multiple historical components and multiple historical component information corresponding to the multiple historical components are used as training samples to perform model training to obtain a recognition model. The recognition model can predict the candidate component information corresponding to the candidate component through the mapping relationship between the component and the component information.

[0056] S204: Screening the multiple candidate components according to the multiple candidate component information to obtain multiple target components.

[0057] In the related art, developers select components for page development from a component library. Directly developing pages based on components may result in the problem that the pages cannot be used normally. This application screens and verifies multiple candidate components in the process of generating a component library to screen out components that cannot be used normally, thereby improving the reliability of the page in the process of developing pages.

[0058] Exemplarily, the candidate component information includes the usage method of each candidate component, and whether the candidate component will fail when used according to the usage method is determined, so as to screen the candidate components. The target components obtained through screening are components that can be used normally.

[0059] S205. Generate a target component library according to multiple target components and multiple target component information corresponding to the multiple target components.

[0060] Exemplarily, the target component and target component information are added to the target component library.

[0061] Optionally, in the target component library, each target component information is placed adjacent to the corresponding target component, so that the developer can quickly determine the target component information corresponding to each target component.

[0062] Combined with the scenario example description, the target component information includes the usage method of the target component. Adding the target component information to the target component library can enable developers to accurately select components from the target component library based on the usage method, thereby improving the accuracy of page development.

[0063] The method for generating a component library provided in an embodiment of the present application comprises receiving a component library generation request, the component library generation request comprising target application scenario information of a target component library; determining multiple target style types corresponding to the target application scenario information and multiple candidate components corresponding to the multiple target style types according to the component library generation request; inputting the multiple candidate components into a recognition model respectively to obtain multiple candidate component information, the recognition model being obtained by model training of multiple historical components; screening and processing the multiple candidate components according to the candidate component information to obtain multiple target components; generating a target component library according to the multiple target components and multiple target component information corresponding to the multiple target components. In the above scheme, the target component library comprises automatically generating target component information through a recognition model, and developers can accurately select appropriate components from the target component library according to the target component information, thereby improving the reliability of pages developed according to the selected components.

[0064] Based on any of the above embodiments, Figure 3 , the detailed process of generating the component library is explained.

[0065] Figure 3 A schematic diagram of a method for generating a component library provided in an embodiment of the present application. Figure 3 As shown, the method includes:

[0066] S301. Receive a component library generation request, where the component library generation request includes target application scenario information of a target component library.

[0067] It should be noted that the execution process of S301 refers to S201 and will not be repeated here.

[0068] S302: extract target keywords from target application scenario information through natural language processing technology.

[0069] Among them, the target keywords are keywords that can reflect the characteristics of the target application scenario.

[0070] Optionally, the target application scenario information may be a description of the target application scenario in natural language. By using natural language processing technology, it is possible to not limit standardized target application scenario information and accurately determine the target application scenario from the target application scenario information.

[0071] In combination with the scenario example, keywords may include functional keywords, such as: button, form, or card, etc. Keywords may include style keywords, such as: simple style, modern style, or professional style, etc. Keywords may include interactive keywords, such as: clickable, hover effect, or draggable, etc. Keywords may include layout keywords, such as: grid layout, elastic layout, or fixed position, etc.

[0072] S303: Determine a first correspondence between keywords and style types, and a style library.

[0073] There is a first correspondence between the style type and the keyword of the adapted application scenario, and the style library includes multiple style types.

[0074] Optionally, the first corresponding relationship is pre-verified, and the matching consistency between the style type and the application scenario can be effectively improved through the verification process.

[0075] Optionally, the version of the style library is continuously updated, and the latest version of the style library is obtained. It can be understood that the latest version of the style library has richer style types, and the richness of the component library can be effectively improved by using the latest version of the style library.

[0076] S304: Determine a plurality of target style types from a style library according to the target keyword and the first corresponding relationship.

[0077] Exemplarily, according to the target keyword and the first corresponding relationship, the style type corresponding to the target keyword is determined, and according to the style type, a match is performed from the style library to obtain the target style type.

[0078] Combined with the scenario example, if the target keyword is a simple style, then the corresponding multiple target style types all conform to the simple style.

[0079] S305: Determine multiple components to be selected according to multiple target style types.

[0080] Among them, multiple candidate components cover various component functions.

[0081] Combined with the scenario example, the page developed by the developer includes multiple functions. Accordingly, the components selected by the developer should also include multiple functions. In order to enable the developer to obtain components with multiple functions, it is necessary to develop a component library including components with multiple functions.

[0082] A feasible implementation method can determine multiple components to be selected by the following method: determine multiple initial components and multiple initial style types corresponding to the multiple initial components; determine multiple component groups corresponding to the multiple target style types from the multiple initial components based on the multiple target style types and the multiple initial style types, each component group includes multiple components, and the number of components in each component group is greater than or equal to a quantity threshold; determine that the multiple components to be selected include multiple components in the multiple component groups.

[0083] Next, combine Figure 4 The method of obtaining the components to be selected is described.

[0084] Figure 4 A schematic diagram of obtaining a component to be selected provided in an embodiment of the present application. Figure 4 As shown, the target style type is the style type corresponding to the component generation request, and all the selected components should conform to the target style type. From the multiple initial style types, the style types corresponding to the multiple target style types are determined, and from the multiple components, multiple component groups are determined according to the corresponding style types. Each component group includes multiple components, and the multiple components in each component group correspond to one target style type.

[0085] Combined with the scenario example, if the number of components in any component group is less than the quantity threshold, it is considered that the components in the component group are not rich enough and cannot provide enough choices for developers.

[0086] Optionally, if the number of components in any component group is less than a quantity threshold, components corresponding to the component group are generated until the number of components in the component group is greater than or equal to the quantity threshold.

[0087] In this feasible implementation, by controlling the number of components in the component grouping, the number of components of each target style type can be enriched, thereby providing developers with more choices during the page development process, thereby improving the accuracy of page development.

[0088] S306. Input the multiple candidate components into the recognition model respectively to obtain information of the multiple candidate components. The recognition model is obtained by training the multiple historical components.

[0089] It should be noted that the execution process of S306 refers to S203 and will not be repeated here.

[0090] S307. Create multiple candidate test cases corresponding to multiple candidate components according to the interaction logic of multiple components.

[0091] The candidate component information includes multiple component interaction logics corresponding to the multiple candidate components.

[0092] Optionally, the component interaction logic includes the interaction logic between components and the logic of the component responding to user operations.

[0093] Combined with the scenario example, take the drop-down box component as an example, the interaction process is that the component displays multiple options of the drop-down box in response to the user's drop-down operation. Take the parent component and child component as an example, the interaction process is that the parent component passes data to the child component, and the child component renders or performs specific operations based on the received data.

[0094] Exemplarily, the test case reflects the component interaction logic, and the test case can implement the interaction logic.

[0095] A feasible implementation method can create test cases by the following method: determine multiple test case templates based on multiple component interaction logics; determine a second corresponding relationship between multiple candidate components and multiple test case templates; generate multiple candidate test cases based on the second corresponding relationship, multiple candidate components, and multiple test case templates.

[0096] Among them, the test case template provides a structured framework.

[0097] Optionally, each test case template can implement the corresponding component interaction logic.

[0098] Optionally, the template information of each test case template includes achievable component interaction logic, and multiple test case templates are determined through the template information.

[0099] Exemplarily, the second corresponding relationship is a test case template filled in for each component to be selected, and the test case template with the second corresponding relationship can implement the component interaction logic of the component to be selected.

[0100] Exemplarily, according to the second corresponding relationship, the test case template corresponding to each candidate component is determined, and each candidate component is filled into the corresponding test case template to obtain a plurality of candidate test cases.

[0101] Next, combine Figure 5 The generation of candidate test cases is described.

[0102] Figure 5 A schematic diagram of generating test cases to be selected provided in an embodiment of the present application. Figure 5 As shown, multiple test case templates are generated based on multiple component interaction logics. According to the candidate components and the second corresponding relationship, a target test case template is determined from the multiple test case templates. The candidate components are filled into the target test case template to obtain the candidate test case.

[0103] In this feasible implementation, multiple test cases are generated through test case templates, which can reduce the operations of developers in writing test cases, thereby improving the generation efficiency of the component library.

[0104] S308. Perform testing through multiple test cases to be selected, and obtain multiple test results, where the test results include test pass or test fail.

[0105] Exemplarily, each test case to be selected is run respectively, and if the run is normal, the test result is that the test is passed. If the run is abnormal, the test result is that the test is failed.

[0106] Combined with the scenario example description, by testing the candidate test cases, the operation of the components in actual use can be simulated, so that testing can be performed before developing the page, thereby improving the accuracy of the developed page.

[0107] S309: Determine multiple target test cases from multiple candidate test cases according to multiple test results, and the test results corresponding to the multiple target test cases are all test passed.

[0108] Exemplarily, if the test passes, it indicates that the components in the target test case can operate normally. It can be understood that the pages developed based on the components in the target test case can be used normally.

[0109] Combined with the scenario example, if a problem occurs during page development, it is necessary to analyze from multiple angles to locate the problem. Testing through test cases can quickly locate the problem, thereby improving development efficiency.

[0110] S310: Determine the candidate components corresponding to the multiple target test cases as multiple target components.

[0111] Optionally, filter the test results to remove components that do not function properly.

[0112] Combined with the scenario example description, the target components obtained by screening according to the test results are components that can operate normally. By screening to obtain components that can operate normally, page problems caused by developers using components that can operate normally can be avoided, thereby improving the accuracy of the development page.

[0113] S311. Generate a target component library according to multiple target components and multiple target component information corresponding to the multiple target components.

[0114] A feasible implementation method is to obtain historical usage records of multiple target components; determine multiple target documents corresponding to the multiple target components based on the historical usage records, and the target documents include at least one of the following: component usage methods, component design principles; generate a target component library based on the multiple target components, multiple target component information corresponding to the multiple target components, and multiple target documents.

[0115] Among them, component usage refers to how to correctly introduce, configure, and call components in a project to ensure that their functions and styles work as expected. Component design principles are key guidelines to guide developers in creating high-quality, reusable, and easy-to-maintain components.

[0116] Optionally, the target document is in a natural language form, so that a developer can select a component through the target document.

[0117] Combined with the scenario example description, developers select corresponding components from the component library according to page requirements. The information in the target document can guide developers to select the required components.

[0118] In this feasible implementation, by adding the target document to the target component library, developers can be helped to accurately select components, thereby improving the accuracy of page development.

[0119] Next, combine Figure 6 This section describes a complete solution for generating a component library using Vue CLI as an example.

[0120] Figure 6 A schematic diagram of generating a component library provided in an embodiment of the present application. Figure 6As shown in the figure, project initialization: select Vue CLI as the scaffolding, execute the "vue create [project name]" command in the command line tool to create an empty vue project. Write component logic and style: First, according to the application scenario, divide the components into general components (such as Button components), layout components (such as Layout components), navigation components (such as Link components), data entry components (such as Form components), data display components (such as Table components), feedback components (such as Confirm components), and other business components, and then sort out the functional points of each component, and write the corresponding code, style, and interaction logic. Write test cases: Use Vue Test Utils to simulate the methods in the Vue component, render the component in the test environment, and check the running and rendering results. Write component documentation: Create detailed documentation covering all usage methods, APIs, design principles, etc. of all components. Packaging: Use the vue-cli-service build--target lib command of the scaffolding to package, and use appropriate packaging parameters according to business needs, such as specifying a special output directory. Release: Execute the npm publish command to publish the component library. Actual project usage: In the target project, execute the npm iS [component library name] command to import the component library.

[0121] Based on the above implementation methods, a component library is generated according to components that can work normally, so that developers can accurately select appropriate components when developing pages, thereby improving the reliability of the developed pages.

[0122] Figure 7 A schematic diagram of a component library generation device provided in an embodiment of the present application. Figure 7 As shown, the component library generation device 70 may include: a receiving module 71, an analyzing module 72, an input module 73, a screening module 74, and a generating module 75, wherein:

[0123] The receiving module 71 is used to receive a component library generation request, where the component library generation request includes target application scenario information of a target component library.

[0124] The analysis module 72 is used to generate a request according to the component library, and determine multiple target style types corresponding to the target application scenario information and multiple candidate components corresponding to the multiple target style types.

[0125] The input module 73 is used to input multiple candidate components into the recognition model respectively to obtain multiple candidate component information. The recognition model is obtained by model training of multiple historical components.

[0126] The screening module 74 is used to screen the multiple candidate components according to the multiple candidate component information to obtain multiple target components.

[0127] The generating module 75 is used to generate a target component library according to multiple target components and multiple target component information corresponding to the multiple target components.

[0128] Optionally, the receiving module 71 may execute Figure 2 S201 in the embodiment.

[0129] Optionally, the analysis module 72 may execute Figure 2 S202 in the embodiment.

[0130] Optionally, the input module 73 may execute Figure 2 S203 in the embodiment.

[0131] Optionally, the screening module 74 may perform Figure 2 S204 in the embodiment.

[0132] Optionally, the generating module 75 may execute Figure 2 S205 in the embodiment.

[0133] It should be noted that the component library generation device shown in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.

[0134] In a possible implementation, the analysis module 72 is specifically configured to:

[0135] Through natural language processing technology, target keywords are extracted from target application scenario information;

[0136] Determine a first correspondence between keywords and style types, and a style library;

[0137] Determine multiple target style types from the style library according to the target keyword and the first corresponding relationship;

[0138] According to the multiple target style types, multiple components to be selected are determined.

[0139] In a possible implementation, the analysis module 72 is specifically configured to:

[0140] Determine a plurality of initial components and a plurality of initial style types corresponding to the plurality of initial components;

[0141] According to the multiple target style types and the multiple initial style types, determine multiple component groups corresponding to the multiple target style types from the multiple initial components, each component group includes multiple components, and the number of components in each component group is greater than or equal to a quantity threshold;

[0142] Determining the plurality of candidate components includes a plurality of components in a plurality of component groups.

[0143] Figure 8 A schematic diagram of a component library generation device provided in an embodiment of the present application. Figure 7 Based on the embodiment shown, Figure 8 As shown, the component library generation device 80 also includes: an execution module 76 and an adding module 77, wherein:

[0144] The candidate component information includes multiple component interaction logics corresponding to the multiple candidate components; the execution module 76 is used to:

[0145] According to the interaction logic of multiple components, multiple test cases corresponding to multiple components are created;

[0146] Performing tests on multiple test cases to be selected to obtain multiple test results, including test pass or test fail;

[0147] According to the multiple test results, multiple target test cases are determined from the multiple candidate test cases, and the test results corresponding to the multiple target test cases are all passed;

[0148] The candidate components corresponding to the multiple target test cases are determined as multiple target components.

[0149] In a possible implementation, the execution module 76 is specifically configured to:

[0150] Determine multiple test case templates based on the interaction logic of multiple components;

[0151] Determine a second correspondence between a plurality of candidate components and a plurality of test case templates;

[0152] A plurality of test cases to be selected are generated according to the second corresponding relationship, the plurality of components to be selected, and the plurality of test case templates.

[0153] Added module 77 for:

[0154] Get historical usage records of multiple target components;

[0155] Determine multiple target documents corresponding to multiple target components according to historical usage records, where the target documents include at least one of the following: component usage method and component design principle;

[0156] A target component library is generated according to a plurality of target components, a plurality of target component information corresponding to the plurality of target components, and a plurality of target documents.

[0157] Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application is shown in FIG. Fig. 9As shown, the electronic device includes:

[0158] The electronic device includes a processor 291 and a memory 292; it may also include a communication interface 293 and a bus 294. The processor 291, the memory 292, and the communication interface 293 may communicate with each other through the bus 294. The communication interface 293 may be used for information transmission. The processor 291 may call the logic instructions in the memory 292 to execute the method of the above embodiment.

[0159] In addition, the logic instructions in the above-mentioned memory 292 can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product.

[0160] The memory 292 is a computer-readable storage medium that can be used to store software programs and computer executable programs, such as program instructions / modules corresponding to the methods in the embodiments of the present application. The processor 291 executes functional applications and data processing by running the software programs, instructions, and modules stored in the memory 292, that is, implementing the methods in the above method embodiments.

[0161] The memory 292 may include a program storage area and a data storage area, wherein the program storage area may store an operating system and an application required for at least one function; the data storage area may store data created according to the use of the terminal device, etc. In addition, the memory 292 may include a high-speed random access memory and may also include a non-volatile memory.

[0162] An embodiment of the present application provides a non-temporary computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the method as described in the above embodiment.

[0163] An embodiment of the present application provides a computer program product, including a computer program, which implements the method of the above embodiment when the computer program is executed by a processor.

[0164] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all optional embodiments, and the actions and modules involved are not necessarily required by the present application.

[0165] It should be further noted that, although the various steps in the flowchart are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a portion of the steps in the flowchart may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these sub-steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.

[0166] It should be understood that the above-mentioned device embodiments are only illustrative, and the device of the present application can also be implemented in other ways. For example, the division of units / modules in the above-mentioned embodiments is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units, modules or components can be combined, or can be integrated into another system, or some features can be ignored or not executed.

[0167] In addition, unless otherwise specified, each functional unit / module in each embodiment of the present application may be integrated into one unit / module, each unit / module may exist physically separately, or two or more units / modules may be integrated together. The above-mentioned integrated unit / module may be implemented in the form of hardware or in the form of a software program module.

[0168] If the integrated unit / module is implemented in the form of hardware, the hardware may be a digital circuit, an analog circuit, etc. The physical implementation of the hardware structure includes but is not limited to transistors, memristors, etc. The processor may be any appropriate hardware processor, such as a CPU, a GPU, an FPGA, a DSP, and an ASIC, etc. The storage unit may be any appropriate magnetic storage medium or magneto-optical storage medium, such as a resistive random access memory RRAM (Resistive Random Access Memory), a dynamic random access memory DRAM (Dynamic Random Access Memory), a static random access memory SRAM (Static Random-Access Memory), an enhanced dynamic random access memory EDRAM (Enhanced Dynamic Random Access Memory), a high-bandwidth memory HBM (High-Bandwidth Memory), a hybrid memory cube HMC (Hybrid Memory Cube), etc.

[0169] If the integrated unit / module is implemented in the form of a software program module and sold or used as an independent product, it can be stored in a computer-readable memory. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art or all or part of the technical solution, can be embodied in the form of a software product, which is stored in a memory and includes several instructions for a computer device (which can be a personal computer, a server or a network device, etc.) to perform all or part of the steps of the various embodiments of the present application. The aforementioned memory includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or optical disk and other media that can store program codes.

[0170] In the above embodiments, the description of each embodiment has its own emphasis. For the part not described in detail in a certain embodiment, please refer to the relevant description of other embodiments. The technical features of the above embodiments can be combined arbitrarily. In order to make the description concise, all possible combinations of the technical features in the above embodiments are not 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.

[0171] Those skilled in the art will readily appreciate other embodiments of the present application after considering the specification and practicing the invention disclosed herein. The present application is intended to cover any modification, use or adaptation of the present application, which follows the general principles of the present application and includes common knowledge or customary techniques in the art that are not disclosed in the present application. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present application are indicated by the following claims.

[0172] It should be understood that the present application is not limited to the precise structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present application is limited only by the appended claims.

Claims

1. A method for generating a component library, characterized in that: include: receiving a component library generation request, wherein the component library generation request includes target application scenario information of a target component library; Determining, according to the component library generation request, a plurality of target style types corresponding to the target application scenario information and a plurality of to-be-selected components corresponding to the plurality of target style types; Inputting the multiple candidate components into a recognition model respectively to obtain multiple candidate component information, wherein the recognition model is obtained by training the multiple historical components; Screening the multiple candidate components according to the multiple candidate component information to obtain multiple target components; The target component library is generated according to the multiple target components and multiple target component information corresponding to the multiple target components.

2. The method according to claim 1, characterized in that Determining a plurality of target style types corresponding to the target application scenario information and a plurality of to-be-selected components corresponding to the plurality of target style types includes: Extracting target keywords from the target application scenario information through natural language processing technology; Determine a first correspondence between keywords and style types, and a style library; Determining the plurality of target style types from the style library according to the target keyword and the first corresponding relationship; The multiple components to be selected are determined according to the multiple target style types.

3. The method according to claim 2, characterized in that Determining the multiple components to be selected according to the multiple target style types includes: Determine a plurality of initial components and a plurality of initial style types corresponding to the plurality of initial components; According to the multiple target style types and the multiple initial style types, determine multiple component groups corresponding to the multiple target style types from the multiple initial components, each component group includes multiple components, and the number of components in each component group is greater than or equal to a quantity threshold; It is determined that the plurality of components to be selected include a plurality of components in the plurality of component groups.

4. The method according to any one of claims 1 to 3, characterized in that The candidate component information includes multiple component interaction logics corresponding to the multiple candidate components; the multiple candidate components are screened according to the candidate component information to obtain multiple target components, including: Creating a plurality of candidate test cases corresponding to the plurality of candidate components according to the plurality of component interaction logics; Performing tests on the multiple test cases to be selected to obtain multiple test results, wherein the test results include a test pass or a test fail; Determine, according to the multiple test results, multiple target test cases from the multiple test cases to be selected, wherein the test results corresponding to the multiple target test cases are all test passed; The candidate components corresponding to the multiple target test cases are determined as the multiple target components.

5. The method according to claim 4, characterized in that Creating a plurality of candidate test cases corresponding to the plurality of candidate components according to the plurality of component interaction logics includes: Determine multiple test case templates according to the multiple component interaction logics; Determine a second correspondence between the plurality of to-be-selected components and the plurality of test case templates; The multiple test cases to be selected are generated according to the second corresponding relationship, the multiple components to be selected, and the multiple test case templates.

6. The method according to any one of claims 1 to 5, characterized in that Generating the target component library according to the multiple target components and multiple target component information corresponding to the multiple target components includes: Acquire historical usage records of the multiple target components; Determine a plurality of target documents corresponding to the plurality of target components according to the historical usage records, wherein the target documents include at least one of the following: component usage method and component design principle; The target component library is generated according to the multiple target components, the multiple target component information corresponding to the multiple target components, and the multiple target documents.

7. A component library generation device, characterized in that: include: A receiving module, configured to receive a component library generation request, wherein the component library generation request includes target application scenario information of a target component library; An analysis module, configured to generate a request according to the component library, determine a plurality of target style types corresponding to the target application scenario information, and a plurality of candidate components corresponding to the plurality of target style types; An input module, used to input the multiple candidate components into a recognition model respectively to obtain multiple candidate component information, wherein the recognition model is obtained by model training of multiple historical components; A screening module, used for screening the multiple candidate components according to the multiple candidate component information to obtain multiple target components; A generating module is used to generate the target component library according to the multiple target components and multiple target component information corresponding to the multiple target components.

8. An electronic device, characterized in that: include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which are used to implement the method according to any one of claims 1 to 6 when executed by a processor.

10. A computer program product, characterized in that The invention comprises a computer program, which implements the method according to any one of claims 1 to 6 when being executed by a processor.

Images