Vue-based component visualization method, device and equipment

Abstract

The invention provides a Vue-based component visualization method, device and equipment, and the method comprises the steps: receiving and responding to a first operation instruction acting on an operation interface, creating a component configuration interface in a Vue project, and loading a plurality of component libraries in the component configuration interface; receiving and responding to a second operation instruction acting on the operation interface and representing the attribute value of the component configured in the component attribute configuration area, determining that the target component is a component configured in the component library, and updating the target component according to the attribute value; and receiving and responding to a third operation instruction which acts on the operation interface and represents that the configured target component is moved from the component editing area to the display area, and displaying the configured target component in the display area to realize component visualization. The problem that in the prior art, the step of switching the component library in the Vue project is tedious, and consequently the development efficiency is low is solved.

Description

Technical Field

[0001] This application relates to the field of visual construction technology, and more specifically, to a Vue-based component visualization method, a Vue-based component visualization device, and an electronic device. Background Technology

[0002] A single component library has limited component styles, which cannot meet diverse development needs. Developers often need to switch back and forth between multiple component libraries. In existing Vue projects, switching component libraries often involves operations such as environment modification, build configuration adjustment, and style debugging, which are cumbersome. Summary of the Invention

[0003] The main purpose of this application is to provide a Vue-based component visualization method, a Vue-based component visualization device, and an electronic device, so as to at least solve the problem of cumbersome steps in switching component libraries in Vue projects, which leads to low development efficiency in the prior art.

[0004] To achieve the above objectives, according to one aspect of this application, a component visualization method based on Vue is provided, comprising: receiving and responding to a first operation instruction acting on an operation interface, creating a component configuration interface in a Vue project, and loading multiple component libraries in the component configuration interface, the component configuration interface including a component editing area and a component attribute configuration area; receiving and responding to a second operation instruction acting on the operation interface, representing configuring attribute values ​​of a component in the component attribute configuration area, determining a target component as the component configured in the component library, and updating the target component according to the attribute values, the attribute values ​​being parameter values ​​used to define the type and display content of the component; receiving and responding to a third operation instruction acting on the operation interface, representing moving the configured target component from the component editing area to a display area, and displaying the configured target component in the display area to achieve component visualization, the display area being an area used to display the configured target component.

[0005] Optionally, receiving and responding to a third operation instruction acting on the operation interface, representing the movement of the configured target component from the component editing area to the display area, and displaying the configured target component in the display area, includes: listening to the third operation instruction to determine the mouse trajectory of the third operation instruction, and generating a pop-up layer that follows the mouse trajectory, the pop-up layer being a temporary visualization layer of the configured target component; determining the target position of the configured target component based on the mouse trajectory, and moving the configured target component into the target area based on the target position, the target position being the position where the mouse is released.

[0006] Optionally, moving the configured target component into the target area according to the target location includes: moving the configured target component to the target location if the mouse release location is detected to be within the display area; and determining that the third operation instruction is invalid if the mouse release location is detected to be outside the display area.

[0007] Optionally, the component configuration interface further includes a component selection area, and the method further includes: receiving and responding to an instruction acting on the operation interface that represents switching the component library, loading the component in the target component library in the component selection area, wherein the target component library is the component library selected by the instruction to switch the component library.

[0008] Optionally, after creating a component configuration interface in a Vue project, the method further includes: classifying each component according to the function of each component in multiple component libraries to obtain multiple function categories; setting multiple sub-regions in the component selection area according to the function categories, so that each sub-region corresponds one-to-one with each function category, and the sub-region includes the component corresponding to the function category of the sub-region.

[0009] Optionally, after receiving and responding to a third operation instruction acting on the operation interface to move the configured target component from the component editing area to the display area, and displaying the configured target component in the display area, the method further includes: exporting the configured target component as data in a predetermined format, the data including the type of the target component and the attribute value.

[0010] Optionally, before updating the target component based on the attribute value, the method further includes: if a missing field is detected in the attribute value, displaying a prompt message indicating an error in the attribute value in the component attribute configuration area, and prohibiting the component with the erroneous attribute value from being moved to the display area.

[0011] Optionally, the method further includes: processing the historical configuration records of the component using a neural network model and learning from the processing results to obtain a trained neural network model, wherein the historical configuration records include the size data of the configured display area, the type of the component in the configured display area, and the attribute values ​​of the component in the configured display area; upon receiving the second operation instruction, inputting the current size data of the display area and the type of the target component into the trained neural network model for processing to obtain the predicted attribute values ​​of the target component, and filling the predicted attribute values ​​into the attribute configuration area.

[0012] According to another aspect of this application, a component visualization device based on Vue is provided, comprising: a first receiving unit, configured to receive and respond to a first operation instruction acting on an operation interface, create a component configuration interface in a Vue project, and load multiple component libraries in the component configuration interface, the component configuration interface including a component editing area and a component attribute configuration area; a second receiving unit, configured to receive and respond to a second operation instruction acting on the operation interface, representing the configuration of attribute values ​​of a component in the component attribute configuration area, determine a target component as the component configured in the component library, and update the target component according to the attribute values, the attribute values ​​being parameter values ​​used to define the type and display content of the component; and a third receiving unit, configured to receive and respond to a third operation instruction acting on the operation interface, representing the movement of the configured target component from the component editing area to a display area, and display the configured target component in the display area to achieve component visualization, the display area being an area for displaying the configured target component.

[0013] According to another aspect of this application, an electronic device is provided, comprising: one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including methods for performing any one of the methods described.

[0014] The technical solution of this application first receives and responds to a first operation instruction acting on the operation interface to create a component configuration interface in the Vue project and load multiple component libraries in the component configuration interface; then, it receives and responds to a second operation instruction acting on the operation interface, representing configuring the component's attribute values ​​in the component attribute configuration area, determining the target component as the configured component in the component library, and updating the target component according to the attribute values; finally, it receives and responds to a third operation instruction acting on the operation interface, representing moving the configured target component from the component editing area to the display area, and displays the configured target component in the display area to achieve component visualization. This solution encapsulates multiple component libraries into a single component configuration interface, allowing developers to switch between component libraries directly by clicking on the component library in the component configuration interface. This solves the problem of cumbersome steps and low development efficiency when switching component libraries in a Vue project. Attached Figure Description

[0015] The accompanying drawings, which form part of this application, are used to provide a further understanding of this application. The illustrative embodiments and descriptions of this application are used to explain this application and do not constitute an undue limitation of this application. In the drawings:

[0016] Figure 1 A flowchart illustrating a Vue-based component visualization method according to an embodiment of this application is shown.

[0017] Figure 2 A flowchart illustrating another Vue-based component visualization method provided according to an embodiment of this application is shown.

[0018] Figure 3 A component visualization user interface provided according to an embodiment of this application is shown;

[0019] Figure 4 A structural block diagram of a Vue-based component visualization device provided according to an embodiment of this application is shown. Detailed Implementation

[0020] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0021] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0022] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate for the embodiments of this application described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0023] As described in the background section, the steps for switching component libraries in a Vue project are cumbersome in the prior art, resulting in low development efficiency. To solve the above technical problems, embodiments of this application provide a Vue-based component visualization method, a Vue-based component visualization device, and an electronic device.

[0024] The technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention.

[0025] Figure 1 This is a flowchart of a Vue-based component visualization method according to an embodiment of this application. Figure 1 As shown, the method includes the following steps:

[0026] Step S101: Receive and respond to the first operation instruction applied to the operation interface, create a component configuration interface in the Vue project, and load multiple component libraries in the component configuration interface. The component configuration interface includes a component editing area and a component property configuration area.

[0027] Specifically, a component configuration interface is created within the Vue project environment. This interface serves as a main component, encompassing multiple component libraries used to display the component collection. Multiple component libraries, such as ElementUI (Element User Interface, a desktop component library) and Ant Design Vue (Ant Design of Vue, a component library), are dynamically loaded within the configuration interface. These component libraries are installed into the project via the Node.js package manager and then imported into the component configuration interface's code using the `import` statement. This `import` statement represents a syntax for importing the export functionality of modules.

[0028] Step S102: Receive and respond to a second operation instruction acting on the above operation interface, representing the attribute value of the component configured in the above component attribute configuration area, determine the target component as the component configured in the above component library, and update the target component according to the attribute value, wherein the attribute value is a parameter value used to define the type and display content of the component.

[0029] Specifically, relying on Vue's watch events, the target component is updated in real time based on the attribute values ​​configured by the user, so that its appearance and function change according to the parameter values ​​set by the user. The watch events mentioned above are used to observe and respond to data changes on the Vue instance.

[0030] Step S103: Receive and respond to a third operation instruction acting on the above-mentioned operation interface, indicating that the configured target component is moved from the component editing area to the display area, and display the configured target component in the display area to achieve component visualization. The display area is an area used to display the configured target component.

[0031] Specifically, drag-and-drop functionality is added to components in the component configuration interface by registering mousedown (mouse down), mousemove (mouse move), and mouseup (mouse release) events on the components to track and respond to user drag-and-drop operations. The mousedown event is triggered when the user's mouse button is pressed, the mousemove event is triggered when the user's mouse moves on the page (or on an element), and the mouseup event is triggered when the user's mouse button is released.

[0032] The above embodiments first receive and respond to a first operation instruction applied to the operation interface to create a component configuration interface in the Vue project and load multiple component libraries in the component configuration interface; then, they receive and respond to a second operation instruction applied to the operation interface, indicating that the component's attribute values ​​are configured in the component attribute configuration area, determine that the target component is the component configured in the component library, and update the target component according to the attribute values; finally, they receive and respond to a third operation instruction applied to the operation interface, indicating that the configured target component is moved from the component editing area to the display area, and display the configured target component in the display area to achieve component visualization. This solution encapsulates multiple component libraries into a single component configuration interface, allowing developers to switch between component libraries by directly clicking on the component library in the component configuration interface, thus solving the problem of cumbersome steps and low development efficiency when switching component libraries in a Vue project.

[0033] In one alternative embodiment, receiving and responding to a third operation instruction acting on the aforementioned operation interface, which indicates that the configured target component is moved from the component editing area to the display area, and displaying the configured target component in the display area, includes: listening to the third operation instruction to determine the mouse trajectory of the third operation instruction and generating a pop-up layer that follows the mouse trajectory, the pop-up layer being a temporary visualization layer of the configured target component; determining the target position of the configured target component based on the mouse trajectory, and moving the configured target component into the target area based on the target position, the target position being the position where the mouse is released.

[0034] In the above embodiments, after the user completes the configuration of the target component in the component editing area, they can move the target component to the display area by dragging it with the mouse. The system listens for and responds to the user's dragging operation on the interface, i.e., the third operation command. When the user presses the mouse and starts dragging, the system tracks the mouse position and movement path. During the dragging process, a temporary visual layer of the configured target component is generated. It moves along the mouse trajectory, displaying the appearance of the component being dragged in real time, providing an intuitive preview effect and helping the user determine the final position of the component during the dragging process. When the user releases the mouse button, the target position is determined based on the mouse trajectory. Finally, the configured target component is moved into the display area according to the determined target position and displayed in that area. The above process realizes intuitive drag-and-drop configuration of components from the editing area to the display area, improving user experience and development efficiency. There is no need to manually write code to control the movement of components; instead, the layout effect of components can be previewed intuitively in real time through mouse operations, simplifying the complexity of component configuration and improving development efficiency.

[0035] In another alternative approach, moving the configured target component into the target area according to the target location includes: moving the configured target component to the target location if the mouse release location is detected to be within the display area; and determining that the third operation instruction is invalid if the mouse release location is detected to be outside the display area.

[0036] In the above embodiments, by comparing the mouse coordinates with the actual boundary of the display area, if the user moves the mouse outside the display area during dragging, the operation is deemed invalid. This ensures that components are not placed outside the display area, avoiding layout errors or component display problems caused by user misoperation. By determining whether the mouse release position is within the display area, layout chaos or unreasonable component placement can be avoided, ensuring the standardization of page construction.

[0037] In some exemplary embodiments, the component configuration interface further includes a component selection area, and the method further includes: receiving and responding to an instruction acting on the operation interface that represents switching the component library, loading the component in the target component library in the component selection area, wherein the target component library is the component library selected by the instruction to switch the component library.

[0038] In the above embodiments, different component libraries can be switched in the component configuration interface, such as switching from Element UI to Ant Design Vue. When a new component library is selected, the component selection area will immediately load and display all components in that library, reducing waiting time and improving development efficiency. By allowing dynamic switching of component libraries in the configuration interface, developers are no longer limited to components from a single library, expanding the range of available components, simplifying the development process, and saving time spent searching for components. Furthermore, because the entire switching process is smooth and intuitive, the component selection area can be seen in real-time through the component configuration interface. Differences between similar components in different component libraries, such as style and functionality, can also be compared within the same configuration interface, greatly enhancing the functionality of the component visual configuration tool, improving development efficiency, simplifying the component selection and usage process, and also improving the user experience, allowing developers to access and control multiple component library resources from a unified interface.

[0039] Specifically, when a command to switch component libraries is received, the corresponding components are dynamically loaded according to the component library selected by the user, and the component information is updated in the component selection area so that all components in the target component library are displayed.

[0040] In other exemplary embodiments, after creating a component configuration interface in a Vue project, the method further includes: classifying the components according to their functions in the multiple component libraries to obtain multiple functional categories; setting multiple sub-regions in the component selection area according to the functional categories, so that each sub-region corresponds one-to-one with each functional category, and the sub-region includes the component corresponding to the functional category of the sub-region.

[0041] In the above embodiments, by categorizing components according to function, such as form components, layout components, and data display components, and setting corresponding sub-areas in the component selection area, navigation is provided for users. This helps users find the specific type of component they need more quickly, without having to browse the entire component collection. Functional categorization makes the component configuration interface more clearly organized, making comparison and decision-making easier when selecting components. Furthermore, categorized display allows users to fully understand and use each component in the component library, avoiding situations where components are buried in long lists and go undiscovered, thus improving the overall utilization rate of the component library. In addition, the functionally categorized component configuration interface reduces the difficulty of use, further improving development efficiency.

[0042] Specifically, first, all components from different component libraries are iterated through. Then, based on the analyzed functional categories, corresponding sub-areas are created in the component selection area of ​​the component configuration interface. Each sub-area corresponds to a type of function, such as "form component", "layout component", "data display component", etc.

[0043] In some exemplary solutions of this application, after receiving and responding to a third operation instruction acting on the above-mentioned operation interface to move the configured target component from the component editing area to the display area, and displaying the configured target component in the display area, the method further includes: exporting the configured target component as data in a predetermined format, the data including the type of the target component and the attribute value.

[0044] In the above embodiments, when the component configuration is completed and it is moved to the display area, the component information, including the component type, attributes, and styles, is obtained. This component information is then exported in a standard format, such as JSON, allowing the configured component to be copied to other projects or pages. This facilitates subsequent reuse and editing of the component, simplifies the component reuse process, saves development time, and further improves development efficiency.

[0045] In some other exemplary embodiments of this application, before updating the target component according to the above attribute value, the method further includes: if a missing field is detected in the above attribute value, displaying a prompt message indicating that the above attribute value is incorrect in the component attribute configuration area, and prohibiting the above component with the above attribute value error from being moved to the above display area.

[0046] In the above embodiments, when a missing field is detected in the attribute value of a target component, the user is prevented from moving the component from the editing area to the display area, thus avoiding runtime errors caused by incomplete configuration. Displaying error messages indicating incorrect attribute values ​​in the component attribute configuration area provides immediate error feedback, facilitating rapid identification and correction of problems, reducing debugging time during development, and improving development efficiency. By displaying error messages in the attribute configuration area, the attribute requirements of each component can be better understood, thereby improving overall code quality and project reliability. When errors occur, displaying error information directly in the component attribute configuration area can prevent erroneous components from being introduced into the display area or the actual project, thus simplifying the debugging process. Developers do not need to repeatedly check the source of errors across multiple pages or environments; they can resolve the problem directly in the configuration interface, further improving development efficiency.

[0047] Specifically, for example, if a form component requires the user to fill in label attributes and pass attributes, but the user only sets the label attributes in the attribute configuration area and omits the pass attributes, the component will not be allowed to be moved to the display area until all required fields are configured correctly.

[0048] In one alternative embodiment, the method further includes: processing the historical configuration records of the components using a neural network model and learning from the processing results to obtain a trained neural network model; the historical configuration records include the size data of the configured display area, the type of the components in the configured display area, and the attribute values ​​of the components in the configured display area; upon receiving the second operation instruction, inputting the current size data of the display area and the type of the target component into the trained neural network model for processing to obtain predicted attribute values ​​of the target component, and filling the predicted attribute values ​​into the attribute configuration area.

[0049] In the above embodiments, when a new target component is selected or dragged into the display area, the neural network model predicts and recommends a set of reasonable initial attribute values ​​based on the component's type and the current display area's size data. This avoids developers having to configure attributes from scratch each time, especially for components with many attributes or complex parameters. Furthermore, since the neural network model has learned the relationship between display area size and component layout from past configurations during training, it can intelligently predict the size, position, and arrangement of new components when they are added, allowing them to automatically occupy the most suitable position in the display area, reducing the need for manual layout adjustments. By learning the component configuration habits of different developers, the model can gradually adapt to individual preferences, improving user experience and increasing development efficiency.

[0050] Specifically, historical configuration records are first collected, including data on different display area sizes, component types, and specific attribute values ​​during configuration. This data needs to be preprocessed, including data cleaning to remove invalid or duplicate data points, data standardization to ensure numerical attributes are within a common range, and encoding to convert categorical data into numerical form.

[0051] To enable those skilled in the art to better understand the technical solution of this application, the implementation process of the Vue-based component visualization method of this application will be described in detail below with reference to specific embodiments.

[0052] This embodiment relates to a specific method for visualizing components based on Vue, such as... Figure 2 As shown, it includes the following steps:

[0053] Step S1: Create a new Vue project, encapsulate a main component to display the component collection, and then import several commonly used component libraries into the main component;

[0054] Step S2: As Figure 3 As shown, the options at the top of the main component are used to switch component libraries, allowing developers to easily select which component library to use. The main component is then divided into three parts: left, middle, and right. The left side displays the various components in the selected component library, the middle is the component editing area, where multiple components can be edited and displayed sequentially from top to bottom, and can be cleared, and the right side is the attribute configuration area, which is divided into form attributes and component attributes.

[0055] Step S3: Divide the components in the component library into multiple modules such as form components, basic components, data components, and message components to facilitate selection as needed during development. After clicking on a component on the left, the relevant component will be displayed in the middle editing area for developers to preview the effect.

[0056] Step S4: Add configuration items for each component in the attribute configuration area. Additionally, if the component is a form component, there should also be a form attribute configuration. For example, if the left-hand selection is a dropdown selection, a dropdown component will appear in the middle editing area. However, since it is a form component, the right-hand attribute configuration area will have two configuration items: component attributes and form attributes. Component attributes include component type (value is the same as the component selection name on the left), field name (the attribute passed to the component for easy component assignment), placeholder tooltip (the default display before selection), and options (dropdown option content), etc., which are component-related attributes. Form attributes include label alignment (left alignment / right alignment / center), form size (medium / small / mini), etc., which are form-related attributes.

[0057] Step S5: Add mousedown, mousemove, and mouseup events to the component selection area on the left and the components in the middle editing area to implement drag-and-drop functionality. In the mousedown event, track the drag operation and record the mouse press position, while creating a pop-up layer to place the component. In the mousemove event, update the position of the dragged element based on the mouse movement. In the mouseup event, stop the drag operation and record the final position. There are two drag-and-drop functionality points: first, in the component selection area on the left; besides clicking the component tab on the left, you can also select a component and drag it into the middle editing area. Second, drag from the editing area to the main page; during this drag-and-drop process, the main component is automatically hidden.

[0058] Step S6: Add a watch event to the attribute configuration on the right. When the attribute configuration changes, the corresponding component in the middle editing area will also change accordingly. Finally, drag the configured related components to the main page to enable the use of the components.

[0059] This solution also provides a specific implementation of using a neural network model to predict component attribute values. First, historical configuration records are extracted from logs, including the size of different display areas, component types, and attribute value configurations. Then, the text-based component types, attribute names, and attribute values ​​are converted into numerical codes, and the attribute values ​​are normalized to facilitate neural network learning. Deep learning models, such as multilayer perceptrons or recurrent neural networks, can be used to predict component attribute values ​​based on historical data. The collected historical configuration data is used as input, and the attribute values ​​are used as output to train the model until it reaches satisfactory prediction accuracy. When a component is selected and its attributes are edited, the system inputs the current display area's size data and component type into the trained neural network model. Based on the learned patterns, the model predicts the optimal attribute values ​​and automatically populates the component attribute configuration area with the predicted values ​​for user reference or direct use. In this solution, the model predicts based on optimal practices from historical data, avoiding unreasonable or incompatible attribute values ​​and improving configuration accuracy. In addition, when configuring components, developers can quickly obtain a set of predicted attribute values, which can be used directly or with slight adjustments, significantly reducing the time spent on manual configuration and further improving development efficiency.

[0060] It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases the steps shown or described may be executed in a different order than that shown here.

[0061] This application also provides a Vue-based component visualization device. It should be noted that this Vue-based component visualization device can be used to execute the Vue-based component visualization method provided in this application. This device is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0062] The following describes the Vue-based component visualization device provided in the embodiments of this application.

[0063] Figure 4 This is a schematic diagram of a Vue-based component visualization device according to an embodiment of this application. Figure 4 As shown, the device includes:

[0064] The first receiving unit 10 is used to receive and respond to the first operation instruction applied to the operation interface, create a component configuration interface in the Vue project, and load multiple component libraries in the component configuration interface. The component configuration interface includes a component editing area and a component property configuration area.

[0065] Specifically, a component configuration interface is created within the Vue project environment. This interface serves as a main component, encompassing multiple component libraries used to display the component collection. Multiple component libraries, such as ElementUI (Element User Interface, a desktop component library) and Ant Design Vue (Ant Design of Vue, a component library), are dynamically loaded within the configuration interface. These component libraries are installed into the project via the Node.js package manager and then imported into the component configuration interface's code using the `import` statement. This `import` statement represents a syntax for importing the export functionality of modules.

[0066] The second receiving unit 20 is configured to receive and respond to a second operation instruction acting on the operation interface, which represents the attribute value of the component configured in the component attribute configuration area, determine the target component as the component configured in the component library, and update the target component according to the attribute value, wherein the attribute value is a parameter value used to define the type and display content of the component.

[0067] Specifically, relying on Vue's watch events, the target component is updated in real time based on the attribute values ​​configured by the user, so that its appearance and function change according to the parameter values ​​set by the user. The watch events mentioned above are used to observe and respond to data changes on the Vue instance.

[0068] The third receiving unit 30 is used to receive and respond to a third operation instruction acting on the above-mentioned operation interface, which indicates that the configured target component is moved from the component editing area to the display area, and to display the configured target component in the display area to achieve component visualization. The display area is an area used to display the configured target component.

[0069] Specifically, drag-and-drop functionality is added to components in the component configuration interface by registering mousedown, mousemove, and mouseup events on the components to track and respond to user drag-and-drop operations. The mousedown event is triggered when the user's mouse button is pressed, the mousemove event is triggered when the user's mouse moves on the page (or on an element), and the mouseup event is triggered when the user's mouse button is released.

[0070] In the above embodiments, firstly, a first receiving unit receives and responds to a first operation instruction applied to the operation interface, creating a component configuration interface in the Vue project and loading multiple component libraries within it. Next, a second receiving unit receives and responds to a second operation instruction applied to the operation interface, indicating the configuration of component attribute values ​​in the component attribute configuration area, determining the target component as the configured component in the component library, and updating the target component according to the attribute values. Finally, a third receiving unit receives and responds to a third operation instruction applied to the operation interface, indicating the movement of the configured target component from the component editing area to the display area, displaying the configured target component in the display area to achieve component visualization. This solution encapsulates multiple component libraries into a single component configuration interface, allowing developers to switch between component libraries directly by clicking on them within the configuration interface. This solves the problem of cumbersome steps and low development efficiency associated with switching component libraries in Vue projects.

[0071] As an optional solution, the third receiving unit includes: a listening module, used to listen to the third operation command, determine the mouse trajectory of the third operation command, and generate a pop-up layer that follows the mouse trajectory, the pop-up layer being a temporary visualization layer of the configured target component; and a determining module, used to determine the target position of the configured target component based on the mouse trajectory, and move the configured target component into the target area based on the target position, the target position being the position where the mouse is released.

[0072] In the above embodiments, after the user completes the configuration of the target component in the component editing area, they can move the target component to the display area by dragging it with the mouse. The system listens for and responds to the user's dragging operation on the interface, i.e., the third operation command. When the user presses the mouse and starts dragging, the system tracks the mouse position and movement path. During the dragging process, a temporary visual layer of the configured target component is generated. It moves along the mouse trajectory, displaying the appearance of the component being dragged in real time, providing an intuitive preview effect and helping the user determine the final position of the component during the dragging process. When the user releases the mouse button, the target position is determined based on the mouse trajectory. Finally, the configured target component is moved into the display area according to the determined target position and displayed in that area. The above process realizes intuitive drag-and-drop configuration of components from the editing area to the display area, improving user experience and development efficiency. There is no need to manually write code to control the movement of components; instead, the layout effect of components can be previewed intuitively in real time through mouse operations, simplifying the complexity of component configuration and improving development efficiency.

[0073] In one optional embodiment, the determining module includes: a moving submodule, configured to move the configured target component to the target position when the mouse release position is detected to be within the display area; and a determining submodule, configured to determine that the third operation instruction is invalid when the mouse release position is detected to be outside the display area.

[0074] In the above embodiments, by comparing the mouse coordinates with the actual boundary of the display area, if the user moves the mouse outside the display area during dragging, the operation is deemed invalid. This ensures that components are not placed outside the display area, avoiding layout errors or component display problems caused by user misoperation. By determining whether the mouse release position is within the display area, layout chaos or unreasonable component placement can be avoided, ensuring the standardization of page construction.

[0075] In some exemplary embodiments, the apparatus further includes: a fourth receiving unit, configured to receive and, in response to an instruction acting on the operating interface representing switching the component library, load the component from the target component library in the component selection area, wherein the target component library is the component library selected by the instruction to switch the component library.

[0076] In the above embodiments, different component libraries can be switched in the component configuration interface, such as switching from Element UI to Ant Design Vue. When a new component library is selected, the component selection area will immediately load and display all components in that library, reducing waiting time and improving development efficiency. By allowing dynamic switching of component libraries in the configuration interface, developers are no longer limited to components from a single library, expanding the range of available components, simplifying the development process, and saving time spent searching for components. Furthermore, because the entire switching process is smooth and intuitive, the component selection area can be seen in real-time through the component configuration interface. Differences between similar components in different component libraries, such as style and functionality, can also be compared within the same configuration interface, greatly enhancing the functionality of the component visual configuration tool, improving development efficiency, simplifying the component selection and usage process, and also improving the user experience, allowing developers to access and control multiple component library resources from a unified interface.

[0077] Specifically, when a command to switch component libraries is received, the corresponding components are dynamically loaded according to the component library selected by the user, and the component information is updated in the component selection area so that all components in the target component library are displayed.

[0078] In other exemplary embodiments, the apparatus further includes: a classification unit, configured to classify each of the components according to the function of each of the components in the plurality of component libraries to obtain a plurality of functional categories; and a setting unit, configured to set a plurality of sub-regions in the component selection area according to the functional categories, such that each of the sub-regions corresponds one-to-one with each of the functional categories, wherein each sub-region includes the component corresponding to the functional category of the sub-region.

[0079] In the above embodiments, by categorizing components according to function, such as form components, layout components, and data display components, and setting corresponding sub-areas in the component selection area, navigation is provided for users. This helps users find the specific type of component they need more quickly, without having to browse the entire component collection. Functional categorization makes the component configuration interface more clearly organized, making comparison and decision-making easier when selecting components. Furthermore, categorized display allows users to fully understand and use each component in the component library, avoiding situations where components are buried in long lists and go undiscovered, thus improving the overall utilization rate of the component library. In addition, the functionally categorized component configuration interface reduces the difficulty of use, further improving development efficiency.

[0080] Specifically, first, all components from different component libraries are iterated through. Then, based on the analyzed functional categories, corresponding sub-areas are created in the component selection area of ​​the component configuration interface. Each sub-area corresponds to a type of function, such as "form component", "layout component", "data display component", etc.

[0081] In some exemplary embodiments of this application, the above-mentioned apparatus further includes: an export unit, configured to export the configured target component as data in a predetermined format, the data including the type and attribute values ​​of the target component.

[0082] In the above embodiments, when the component configuration is completed and it is moved to the display area, the component information, including the component type, attributes, and styles, is obtained. This component information is then exported in a standard format, such as JSON, allowing the configured component to be copied to other projects or pages. This facilitates subsequent reuse and editing of the component, simplifies the component reuse process, saves development time, and further improves development efficiency.

[0083] In some other exemplary embodiments of this application, the above-mentioned device further includes: a display unit, configured to display a prompt message indicating that the attribute value is incorrect in the component attribute configuration area when a missing field is detected in the attribute value, and to prohibit the component with the incorrect attribute value from being moved to the display area.

[0084] In the above embodiments, when a missing field is detected in the attribute value of a target component, the user is prevented from moving the component from the editing area to the display area, thus avoiding runtime errors caused by incomplete configuration. Displaying error messages indicating incorrect attribute values ​​in the component attribute configuration area provides immediate error feedback, facilitating rapid identification and correction of problems, reducing debugging time during development, and improving development efficiency. By displaying error messages in the attribute configuration area, the attribute requirements of each component can be better understood, thereby improving overall code quality and project reliability. When errors occur, displaying error information directly in the component attribute configuration area can prevent erroneous components from being introduced into the display area or the actual project, thus simplifying the debugging process. Developers do not need to repeatedly check the source of errors across multiple pages or environments; they can resolve the problem directly in the configuration interface, further improving development efficiency.

[0085] Specifically, for example, if a form component requires the user to fill in label attributes and pass attributes, but the user only sets the label attributes in the attribute configuration area and omits the pass attributes, the component will not be allowed to be moved to the display area until all required fields are configured correctly.

[0086] In one alternative embodiment, the apparatus further includes: a processing unit, configured to process the historical configuration records of the components using a neural network model and learn from the processing results to obtain a trained neural network model, wherein the historical configuration records include the size data of the configured display area, the type of the components in the configured display area, and the attribute values ​​of the components in the configured display area; and an input unit, configured to, upon receiving the second operation instruction, input the current size data of the display area and the type of the target component into the trained neural network model for processing to obtain predicted attribute values ​​of the target component, and fill the predicted attribute values ​​into the attribute configuration area.

[0087] In the above embodiments, when a new target component is selected or dragged into the display area, the neural network model predicts and recommends a set of reasonable initial attribute values ​​based on the component's type and the current display area's size data. This avoids developers having to configure attributes from scratch each time, especially for components with many attributes or complex parameters. Furthermore, since the neural network model has learned the relationship between display area size and component layout from past configurations during training, it can intelligently predict the size, position, and arrangement of new components when they are added, allowing them to automatically occupy the most suitable position in the display area, reducing the need for manual layout adjustments. By learning the component configuration habits of different developers, the model can gradually adapt to individual preferences, improving user experience and increasing development efficiency.

[0088] Specifically, historical configuration records are first collected, including data on different display area sizes, component types, and specific attribute values ​​during configuration. This data needs to be preprocessed, including data cleaning to remove invalid or duplicate data points, data standardization to ensure numerical attributes are within a common range, and encoding to convert categorical data into numerical form.

[0089] The aforementioned Vue-based component visualization device includes a processor and a memory. The first receiving unit, the second receiving unit, and the third receiving unit are all stored as program units in the memory. The processor executes these program units stored in the memory to implement their respective functions. All of the above modules reside in the same processor; alternatively, the modules may be located in different processors in any combination.

[0090] The processor contains a kernel, which retrieves the corresponding program unit from memory. One or more kernels can be configured; by adjusting kernel parameters, the cumbersome process of switching component libraries in Vue projects, leading to low development efficiency, can be addressed.

[0091] The memory may include non-permanent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0092] This invention provides a device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, it performs at least the following steps: Step S101, receiving and responding to a first operation instruction applied to an operation interface, creating a component configuration interface in a Vue project, and loading multiple component libraries in the component configuration interface, wherein the component configuration interface includes a component editing area and a component attribute configuration area.

[0093] Specifically, a component configuration interface is created within the Vue project environment. This interface serves as a main component, encompassing multiple component libraries used to display the component collection. Multiple component libraries, such as ElementUI (Element User Interface, a desktop component library) and Ant Design Vue (Ant Design of Vue, a component library), are dynamically loaded within the configuration interface. These component libraries are installed into the project via the Node.js package manager and then imported into the component configuration interface's code using the `import` statement. This `import` statement represents a syntax for importing the export functionality of modules.

[0094] Step S102: Receive and respond to a second operation instruction acting on the above operation interface, representing the attribute value of the component configured in the above component attribute configuration area, determine the target component as the component configured in the above component library, and update the target component according to the attribute value, wherein the attribute value is a parameter value used to define the type and display content of the component.

[0095] Specifically, relying on Vue's watch events, the target component is updated in real time based on the attribute values ​​configured by the user, so that its appearance and function change according to the parameter values ​​set by the user. The watch events mentioned above are used to observe and respond to data changes on the Vue instance.

[0096] Step S103: Receive and respond to a third operation instruction acting on the above-mentioned operation interface, indicating that the configured target component is moved from the component editing area to the display area, and display the configured target component in the display area to achieve component visualization. The display area is an area used to display the configured target component.

[0097] Specifically, drag-and-drop functionality is added to components in the component configuration interface by registering mousedown (mouse down), mousemove (mouse move), and mouseup (mouse release) events on the components to track and respond to user drag-and-drop operations. The mousedown event is triggered when the user's mouse button is pressed, the mousemove event is triggered when the user's mouse moves on the page (or on an element), and the mouseup event is triggered when the user's mouse button is released.

[0098] The devices mentioned in this article can be servers, PCs, tablets, mobile phones, etc.

[0099] In one embodiment of this application, receiving and responding to a third operation instruction acting on the above-mentioned operation interface, indicating that the configured target component is moved from the component editing area to the display area, and displaying the configured target component in the display area, includes: listening to the third operation instruction to determine the mouse trajectory of the third operation instruction, and generating a pop-up layer that follows the mouse trajectory, the pop-up layer being a temporary visualization layer of the configured target component; determining the target position of the configured target component based on the mouse trajectory, and moving the configured target component into the target area based on the target position, the target position being the position where the mouse is released.

[0100] In one embodiment of this application, moving the configured target component into the target area according to the target location includes: moving the configured target component to the target location when the mouse release location is detected to be within the display area; and determining that the third operation instruction is invalid when the mouse release location is detected to be outside the display area.

[0101] In one embodiment of this application, the component configuration interface further includes a component selection area, and the method further includes: receiving and responding to an instruction acting on the operation interface that represents switching the component library, loading the component in the target component library in the component selection area, wherein the target component library is the component library selected by the instruction to switch the component library.

[0102] In one embodiment of this application, after creating a component configuration interface in a Vue project, the method further includes: classifying each component according to the function of each component in the multiple component libraries to obtain multiple function categories; setting multiple sub-regions in the component selection area according to the function categories so that each sub-region corresponds one-to-one with each function category, and the sub-region includes the component corresponding to the function category of the sub-region.

[0103] In one embodiment of this application, after receiving and responding to a third operation instruction acting on the operation interface indicating that the configured target component is moved from the component editing area to the display area, and displaying the configured target component in the display area, the method further includes: exporting the configured target component as data in a predetermined format, the data including the type of the target component and the attribute value.

[0104] In one embodiment of this application, before updating the target component according to the above attribute value, the method further includes: if a missing field is detected in the above attribute value, displaying a prompt message indicating that the above attribute value is incorrect in the component attribute configuration area, and prohibiting the above component with the above attribute value error from being moved to the above display area.

[0105] In one embodiment of this application, the method further includes: processing the historical configuration records of the components using a neural network model and learning from the processing results to obtain a trained neural network model, wherein the historical configuration records include the size data of the configured display area, the type of the components in the configured display area, and the attribute values ​​of the components in the configured display area; upon receiving the second operation instruction, inputting the current size data of the display area and the type of the target component into the trained neural network model for processing to obtain the predicted attribute values ​​of the target component, and filling the predicted attribute values ​​into the attribute configuration area.

[0106] It is obvious to those skilled in the art that the modules or steps of the present invention described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. They can be implemented using computer-executable program code, and thus can be stored in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those described herein, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.

[0107] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0108] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0109] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0110] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0111] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0112] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0113] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0114] The technical features of the above embodiments can be combined in any way. For the sake of brevity, 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.

[0115] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0116] As can be seen from the above description, the embodiments of this application achieve the following technical effects:

[0117] 1) The Vue-based component visualization method of this application first receives and responds to a first operation instruction applied to the operation interface, creating a component configuration interface in the Vue project and loading multiple component libraries in the component configuration interface; then, it receives and responds to a second operation instruction applied to the operation interface, indicating that the component's attribute values ​​are configured in the component attribute configuration area, determining that the target component is the component configured in the component library, and updating the target component according to the attribute values; finally, it receives and responds to a third operation instruction applied to the operation interface, indicating that the configured target component is moved from the component editing area to the display area, and displays the configured target component in the display area to achieve component visualization. This solution encapsulates multiple component libraries into a single component configuration interface, allowing developers to switch between component libraries directly by clicking on the component library in the component configuration interface, solving the problem of cumbersome steps and low development efficiency when switching component libraries in a Vue project.

[0118] 2) The Vue-based component visualization device of this application first receives and responds to a first operation instruction applied to the operation interface through a first receiving unit, creating a component configuration interface in the Vue project and loading multiple component libraries in the component configuration interface; then, a second receiving unit receives and responds to a second operation instruction applied to the operation interface, indicating that the component's attribute values ​​are configured in the component attribute configuration area, determining that the target component is the component configured in the component library, and updating the target component according to the attribute values; finally, a third receiving unit receives and responds to a third operation instruction applied to the operation interface, indicating that the configured target component is moved from the component editing area to the display area, and displays the configured target component in the display area to achieve component visualization. This solution encapsulates multiple component libraries into a single component configuration interface, allowing developers to switch between component libraries by directly clicking on the component library in the component configuration interface, solving the problem of cumbersome steps and low development efficiency when switching component libraries in a Vue project.

[0119] The above description is merely a preferred embodiment of this application and is not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A component visualization method based on Vue, characterized in that, include: Receive and respond to the first operation instruction applied to the operation interface, create a component configuration interface in the Vue project, and load multiple component libraries in the component configuration interface, which includes a component editing area and a component attribute configuration area. Receive and respond to a second operation instruction acting on the operation interface, representing the attribute value of the component configured in the component attribute configuration area, determine the target component as the component configured in the component library, and update the target component according to the attribute value, wherein the attribute value is a parameter value used to define the type and display content of the component; The system receives and responds to a third operation instruction acting on the operation interface, which indicates that the target component with completed configuration is moved from the component editing area to the display area. The system then displays the target component with completed configuration in the display area to visualize the component. The display area is an area used to display the target component with completed configuration.

2. The method according to claim 1, characterized in that, Receiving and responding to a third operation instruction acting on the user interface, indicating that the configured target component is to be moved from the component editing area to the display area, and displaying the configured target component in the display area, includes: Listen to the third operation command to determine the mouse trajectory of the third operation command, and generate a pop-up layer that follows the mouse trajectory. The pop-up layer is a temporary visualization layer of the target component that has been configured. The target position of the configured target component is determined based on the mouse trajectory, and the configured target component is moved into the target area based on the target position, where the target position is the position where the mouse is released.

3. The method according to claim 2, characterized in that, Moving the configured target component into the target area according to the target location includes: If the mouse release location is detected within the display area, the configured target component is moved to the target location; If the mouse release location is not within the display area, the third operation command is determined to be invalid.

4. The method according to claim 1, characterized in that, The component configuration interface also includes a component selection area, and the method further includes: Receive and respond to an instruction acting on the operation interface to switch the component library, load the component from the target component library in the component selection area, the target component library being the component library selected by the instruction to switch the component library.

5. The method according to claim 1, characterized in that, After creating the component configuration interface in a Vue project, the method also includes: The components are classified according to their functions in the multiple component libraries to obtain multiple functional categories; Multiple sub-regions are set in the component selection area according to the function category, so that each sub-region corresponds one-to-one with each function category, and each sub-region includes the component corresponding to the function category of the sub-region.

6. The method according to claim 1, characterized in that, After receiving and responding to a third operation instruction acting on the user interface indicating that the configured target component is to be moved from the component editing area to the display area, and displaying the configured target component in the display area, the method further includes: The configured target component is exported as data in a predetermined format, the data including the type of the target component and the attribute values.

7. The method according to claim 1, characterized in that, Before updating the target component based on the attribute value, the method further includes: If a missing field is detected in the attribute value, a prompt message indicating that the attribute value is incorrect is displayed in the component attribute configuration area, and the component with the incorrect attribute value is prohibited from being moved to the display area.

8. The method according to claim 1, characterized in that, The method further includes: The historical configuration records of the components are processed using a neural network model, and the processing results are learned to obtain the trained neural network model. The historical configuration records include the size data of the display area after configuration, the type of the components in the display area after configuration, and the attribute values ​​of the components in the display area after configuration. Upon receiving the second operation instruction, the current size data of the display area and the type of the target component are input into the trained neural network model for processing to obtain the predicted attribute value of the target component, and the predicted attribute value is filled into the attribute configuration area.

9. A component visualization device based on Vue, characterized in that, include: The first receiving unit is used to receive and respond to the first operation instruction applied to the operation interface, create a component configuration interface in the Vue project, and load multiple component libraries in the component configuration interface. The component configuration interface includes a component editing area and a component attribute configuration area. The second receiving unit is configured to receive and respond to a second operation instruction acting on the operation interface, which represents the attribute value of the component configured in the component attribute configuration area, determine the target component as the component configured in the component library, and update the target component according to the attribute value, wherein the attribute value is a parameter value used to define the type and display content of the component; The third receiving unit is configured to receive and respond to a third operation instruction acting on the operation interface, which indicates that the configured target component is moved from the component editing area to the display area, and to display the configured target component in the display area to achieve component visualization. The display area is an area used to display the configured target component.

10. An electronic device, characterized in that, include: One or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs comprising methods for performing any one of claims 1 to 8.

Images