A visual development tool based on Vue.js and its usage.

Abstract

This invention provides a visual development tool and its usage method based on Vue.js. The tool includes the following steps: S101, creating and managing a Vue project; S102, manipulating the project structure; S103, component-based development; S104, completing the development of static pages. This usage method is a dual-mode development approach for Vue single-page applications, namely visual development and code development. This invention is mainly applicable to application development based on the Vue framework, providing a convenient visual development method for front-end applications. Compared with traditional front-end development models and existing web front-end development tools, this tool manages Vue projects in the cloud, allowing developers to quickly build, automatically deploy, and manage Vue projects in the cloud. The tool integrates mature third-party components and architectures, further improving its functionality and performance. Developers can use this tool to create a complete, customizable Vue application from scratch or import a Vue project for further development.

Description

Technical Field

[0001] This invention belongs to the field of web front-end visual development technology, and relates to visual development tools, specifically a visual development tool based on Vue.js and its usage method. Background Technology

[0002] With the development of new-generation information technology, the software industry, as a fundamental, strategic, and pioneering industry for the nation, plays a crucial supporting and leading role in economic and social development. Web applications dominate software development and application exploration, with an increasing number of industries applying them to informatization, intelligentization, and digitalization processes. Under the current mainstream web front-end and back-end separation development model, front-end applications are becoming increasingly complex and large-scale. From a development perspective, front-end applications contain many repetitive and general functions, as well as personalized business functions across various fields. For developers, these repetitive and general functions consume a significant amount of development time, and this repetitive labor not only affects their work efficiency but also hinders their technical growth. Therefore, improving traditional pure code development methods through certain technical means, reducing redundant and repetitive coding work, increasing code reusability and development efficiency, and enabling developers to focus more on specific domain functionalities is of paramount importance in web front-end development.

[0003] Compared to traditional programming methods, visual programming, based on the "what you see is what you get" principle, allows developers to construct application interfaces like building blocks using various controls provided by the software. This largely avoids repetitive work and improves code reusability. Application development tools centered on visual programming have changed the traditional pure code development model, enabling visual and convenient web application building. Currently, popular web front-end visual development tools mainly fall into two categories. The first category is no-code tools, aimed at non-professional developers, which only support building applications using the tool's existing functions and do not support customized development for specific application scenarios. The second category is low-code tools, which build applications through a drag-and-drop interface with minimal coding. However, currently popular low-code front-end tools are based on native programming languages, and the generated source code does not support mainstream front-end technology frameworks, does not conform to component-based programming principles, contains a large amount of redundant code, and has extremely low code reusability.

[0004] In web application development, Vue.js, as a user-friendly, versatile, and high-performance JavaScript framework, is considered one of the three major front-end frameworks, along with React and Angular. Using Vue allows for the creation of more maintainable and testable codebases. Vue is not only easy to learn but also convenient to integrate with third-party libraries or existing projects, which is why it is currently widely used.

[0005] Based on the above analysis, the key issue that needs to be addressed is how to solve the problems existing in traditional front-end development methods and current visual programming tools, and provide front-end developers with a fast, secure, and highly compatible development tool. Summary of the Invention

[0006] In view of the shortcomings of the existing technology, the purpose of this invention is to provide a visual development tool and usage method based on Vue.js, so as to solve the technical problem that the performance of existing front-end development tools needs to be further improved.

[0007] To solve the above-mentioned technical problems, the present invention adopts the following technical solution:

[0008] A visual development tool based on Vue.js, which includes the following steps:

[0009] S101, Creating and Managing Vue Projects:

[0010] After logging into the Vue.js tool platform, developers can create or import Vue projects in the cloud. Once the Vue project is generated or imported, it can be automatically deployed in the cloud, forming a Vue project visible to any user.

[0011] S102, Operational Engineering Structure:

[0012] Open a Vue project in the Vue.js tool platform and manipulate the project structure. There are two ways to create and edit files: one is to design the page by dragging and dropping components, which generates the Vue structure code in the process; the other is to implement complex business requirements through code based on the generated or imported code.

[0013] S103, Component-based Development:

[0014] Building upon single-page applications, component-based development supports dragging and dropping pre-packaged composite components onto other pages for page reuse, and registering events used for inter-component communication to a global event bus to enable dynamic interaction between components.

[0015] The component-based development mentioned above refers to breaking down complex business logic into multiple components, with each component's dependent resources being developed and maintained together; these resources include CSS, JS, templates, and images.

[0016] S104, Complete the development of static pages:

[0017] Configure data sources for each component of the page. The data sources are obtained in the standard format of RestfulAPI to realize data interaction with the backend and implement basic business logic functions. Finally, it supports exporting the Vue project to the local machine for easy use later.

[0018] The present invention also has the following technical features:

[0019] Preferably, in step S101, the specific process of creating and managing a Vue project includes the following steps:

[0020] S10101, Creation Request:

[0021] After the developer logs into the Vue.js tool platform from the cloud, the Vue.js tool platform receives the Vue project creation request initiated by the developer;

[0022] S10102, Get the list of Vue templates in the cloud:

[0023] Vue templates are pre-set in the cloud, and developers who log in can access a list of Vue templates in the cloud.

[0024] The Vue templates mentioned include commonly used templates and custom templates;

[0025] The commonly used templates include the original vue-cli template, templates integrating commonly used third-party libraries, and templates for backend management systems;

[0026] The custom template mentioned above refers to using an existing Vue project as a template;

[0027] S10103, Using a template to generate a Vue project:

[0028] After obtaining the list of Vue templates in the cloud, the developer can then create a Vue project. During the project creation process, several Vue project templates are requested from the cloud. The developer can then select the appropriate template type according to the needs of the project to generate a complete Vue project online.

[0029] S10104, Automated deployment of Vue projects and storage of related information:

[0030] S1010401 First, the available port in the cloud is obtained according to the Java ServerSocket.getLocalPort method. This available port is used by the user to run and deploy the Vue project.

[0031] S1010402 calls the cloud-based npm package management tool and automatically installs project dependencies based on the Vue project's package.json file;

[0032] S1010403, calls the script to run the Vue project in the cloud and deploys the Vue project to the obtained idle port;

[0033] S1010404 stores the Vue project name, port number, running status, and user information in a relational database MySQL, facilitating real-time monitoring and management of the project. It uses a timer to poll the running port of the online project to determine the health of the process and promptly repair abnormal projects. It also supports developers to manually set the running status of the project, including launching and decommissioning the project.

[0034] This invention also protects a method of using the visual development tool based on Vue.js as described above, which is a dual-mode development method for Vue single-page applications, namely, visual development and code development.

[0035] The usage method includes the following steps:

[0036] Step 1: The user enters the editing page and browses the single components provided in the Vue.js-based visual development tool;

[0037] Step 2: When a user selects a single component or a composite component composed of multiple single components by browsing the component area, the user drags the single component or composite component to the ideal position on the canvas, which constitutes a valid visual drag and drop.

[0038] To create a canvas where components can be placed, the canvas is the currently edited single page. To allow components to be dragged and dropped onto the canvas, the following two steps are required:

[0039] The first step is to define a dropover event for the canvas to specify where the dragged element can be placed. This event needs to prevent the element from being placed on other elements by default so that the dragged element can be placed on the canvas.

[0040] The second step is to define a drop event for the canvas, which is triggered when an element is placed. After the event is triggered, on the one hand, in order to place the element in the ideal position, it is necessary to calculate the placement position of the component based on the current mouse offsetX and offsetY, and then locate the position through the component's top and left properties; on the other hand, it is necessary to get the currently dragged component in the global variables, render it according to its rendering function, and the component is placed in the specified position on the canvas.

[0041] Step 3: Adjust the position and size of the dragged-and-drop components;

[0042] Step four: Generate code and support secondary development;

[0043] Step 5: Based on the page layout requirements, repeat the methods from Step 2 to Step 4 to complete the development of the single page.

[0044] Preferably, in step two, when the user selects a composite component, the composite component is dragged and dropped into the currently edited single page in a visual manner, realizing visual component-based development, specifically including the following steps:

[0045] Step 201, Add anchor points:

[0046] Add an anchor point at a specified position on the canvas within the currently edited single page, and set drop and dropover events for the anchor point to ensure that the anchor point can hold composite components;

[0047] Step 202, specify the container width and height:

[0048] Specifies the width and height of the container where the anchor point is located, used to place the composite component;

[0049] Step 203: Browse the composite component and drag and drop it into the container, and generate the code;

[0050] When a composite component is dragged and placed into a container, the real component is located according to the mapping relationship, and the real component is mounted into the container; based on the container position, the corresponding import code and component tag code are generated in the currently edited single page.

[0051] Step 204: Determine whether the composite component needs to communicate with other pages.

[0052] Determine whether the composite component used on the currently edited single page has related data interaction behavior with other pages; if so, define the event visually and realize the interaction through global time bus communication; if not, configure the data of the composite component on the currently edited single page so that the composite component can realize data response in the currently edited single page.

[0053] Step 205: If multiple composite components need to be selected, steps 203 and 204 need to be repeated to complete the single-page development.

[0054] Preferably, in step four, the specific process of generating code and supporting secondary development includes the following steps:

[0055] Step 401: Provide a colorless and transparent graphic container area as a canvas for drawing graphics, and control each pixel;

[0056] Step 402: The encapsulated component elements can be dragged and dropped, and their positions can be calculated for free placement on the canvas. While visually editing the page, Vue-structured front-end code can be generated.

[0057] Step 403: The project code can be opened with the editor integrated into the cloud platform, conforming to code standards, highlighting keywords, and supporting online secondary editing.

[0058] Compared with the prior art, the present invention has the following technical effects:

[0059] (I) The visual development tool based on Vue.js of this invention is mainly applicable to application development based on the Vue framework, providing a convenient visual development method for front-end applications. Compared with traditional front-end development models and existing web front-end development tools, this tool manages Vue projects in the cloud, allowing developers to quickly build, automatically deploy, and manage Vue projects in the cloud. This tool integrates mature third-party components and architectures, further improving its functionality and performance. Developers can use this tool to create a complete, customizable Vue application from scratch or import a Vue project for further development.

[0060] (II) The development tool of this invention is designed for Web front-end application development and provides a tool that simultaneously supports two development modes: pure code mode and visual programming mode. This development tool enables visual construction of Web front-end applications, improving traditional development methods, avoiding a large amount of repetitive work, and increasing code reusability. This development tool is geared towards developers, generating source code during the visual construction process and supporting online secondary development to meet various business needs. By introducing a component-based development approach, this development tool constructs loosely coupled, highly cohesive, and reusable front-end code, further improving the development efficiency of front-end applications.

[0061] (III) The development tool of this invention solves the problems of repetitive work, low development efficiency, and low code reusability in traditional Web front-end development and existing visual programming tools. Developers can use the development tool of this invention to develop components through visual drag-and-drop and traditional code development methods. Attached Figure Description

[0062] Figure 1 This is a flowchart of the visual development tool described in this invention.

[0063] Figure 2 This is a diagram illustrating the principles of creating and managing Vue projects.

[0064] Figure 3 This is a flowchart of the dual-mode development approach for Vue single-page applications.

[0065] Figure 4 This is a flowchart of one implementation of the component-based development method.

[0066] The specific content of the present invention will be further explained in detail below with reference to the embodiments. Detailed Implementation

[0067] It should be noted that, unless otherwise specified, all devices and algorithms in this invention are based on devices and algorithms known in the prior art.

[0068] Following the above technical solutions, specific embodiments of the present invention are given below. It should be noted that the present invention is not limited to the following specific embodiments, and all equivalent modifications made based on the technical solutions of this application fall within the protection scope of the present invention.

[0069] Example 1:

[0070] This embodiment provides a visual development tool based on Vue.js, such as... Figure 1 As shown, this visual development tool includes the following steps:

[0071] S101, Creating and Managing Vue Projects:

[0072] After logging into the Vue.js tool platform, developers can create or import Vue projects in the cloud. Once the Vue project is generated or imported, it can be automatically deployed in the cloud, forming a Vue project visible to any user.

[0073] Developers complete the entire lifecycle of a Vue project development process in the cloud. Basic operations on a Vue project include: online modification of the project's directory structure. Specifically, this includes: creating, deleting, and renaming folders. Individual files also have creation, deletion, and renaming capabilities.

[0074] As a preferred embodiment, in step S101, such as Figure 2 As shown, the specific process of creating and managing a Vue project includes the following steps:

[0075] S10101, Creation Request:

[0076] After the developer logs into the Vue.js tool platform from the cloud, the Vue.js tool platform receives the Vue project creation request initiated by the developer.

[0077] S10102, Get the list of Vue templates in the cloud:

[0078] Vue templates are pre-set in the cloud, and developers who log in can access a list of Vue templates in the cloud.

[0079] The Vue templates mentioned include common templates and custom templates.

[0080] The commonly used templates include the original vue-cli template, templates integrating commonly used third-party libraries, and templates for backend management systems.

[0081] The custom template mentioned refers to using an existing Vue project as a template.

[0082] To help users create Vue projects that better suit their needs, this tool provides a template feature, including commonly used templates and custom templates. Users can use these templates to quickly build projects.

[0083] The commonly used templates are:

[0084] vue-cli original template: The official scaffolding template provided by Vue is a clean template. Compared to other templates, this template allows you to choose the appropriate technology stack based on your business needs.

[0085] This template integrates popular third-party libraries such as vuex, element-ui, and vue-router, saving you from some repetitive work.

[0086] Backend Management System Template: This template is a general-purpose backend management system with common functions such as user management, permission management, and system management, improving the development efficiency of developers.

[0087] Custom templates refer to using an existing Vue project as a template. This project can be imported by the user or built using the tool. The advantage of introducing custom templates is that users can build a general project template based on their technology stack or common business needs, allowing for flexible selection and quick setup when developing new projects.

[0088] S10103, Using a template to generate a Vue project:

[0089] After obtaining a list of Vue templates from the cloud, developers can then create a Vue project. During the project creation process, several Vue project templates are requested from the cloud. Developers can then select the appropriate template type based on the needs of the project to generate a complete Vue project online.

[0090] S10104, Automated deployment of Vue projects and storage of related information:

[0091] To enable real-time operation and automated deployment and management of Vue projects, the specific implementation method is as follows:

[0092] S1010401 First, the available port in the cloud is obtained according to the Java ServerSocket.getLocalPort method. This available port is used by users to run and deploy Vue projects.

[0093] S1010402 invokes the cloud-based npm package management tool and automatically installs project dependencies based on the Vue project's package.json file.

[0094] S1010403 calls the script to run the Vue project in the cloud and deploys the Vue project to the obtained idle port.

[0095] S1010404 stores the Vue project name, port number, running status, and user information in a relational database MySQL, facilitating real-time monitoring and management of the project. It uses a timer to poll the running port of the online project to determine the health of the process and promptly repair abnormal projects. It also supports developers to manually set the running status of the project, including launching and decommissioning the project.

[0096] This completes the creation and automated deployment of the Vue project. Developers can begin dual-mode development of the project using this tool, and users can access the project via cloud IP and port.

[0097] S102, Operational Engineering Structure:

[0098] Open a Vue project in the Vue.js tool platform and manipulate the project structure. There are two ways to create and edit files: one is to design the page by dragging and dropping components, which generates the Vue structure code in the process; the other is to implement complex business requirements through code based on the generated or imported code.

[0099] S103, Component-based Development:

[0100] Building upon single-page applications, component-based development supports dragging and dropping pre-packaged composite components onto other pages for page reuse, and registering events used for inter-component communication to a global event bus to enable dynamic interaction between components.

[0101] The aforementioned component-based development refers to breaking down complex business logic into multiple components, with each component's dependent resources being developed and maintained together. These resources include CSS (Cascading Style Sheets), JS (JavaScript, a lightweight, interpreted or just-in-time compiled programming language with a function-first approach), templates, and images.

[0102] Because components are resource-independent, they are reusable within the system, greatly simplifying code and making them more user-friendly for future changes and maintenance. After completing single-page development in dual-mode, component-based visual development is implemented, including not only third-party components but also supporting drag-and-drop placement of single-file components on other single-page applications.

[0103] S104, Complete the development of static pages:

[0104] Configure data sources for each component of the page. The data sources are obtained in the standard format of RestfulAPI to realize data interaction with the backend and implement basic business logic functions. Finally, it supports exporting the Vue project to the local machine for easy use later.

[0105] Example 2:

[0106] This embodiment provides a method for using the visual development tool based on Vue.js given in Embodiment 1. This method is a dual-mode development approach for Vue single-page applications, namely visual development and code development.

[0107] like Figure 3 As shown, the method of use includes the following steps:

[0108] Step 1: The user enters the editing page and browses the single components provided in the Vue.js-based visual development tool.

[0109] Step two: When browsing the component area, the user selects the desired single component, or when selecting a composite component composed of multiple single components, the user drags the single component or composite component to the desired position on the canvas, which constitutes a valid visual drag and drop.

[0110] To achieve visual drag-and-drop functionality, this invention requires a draggable third-party component library. First, a component area needs to be created, displayed by iterating through a component array. Third-party components are added to the array via a registration method, which requires passing the component's label and the `render()` function. During array iteration, the `draggable` property is uniformly added to all components, enabling draggability, and a `dragstart` method is uniformly added, which records the dragged element in a global variable.

[0111] Dragging a component is the starting action; the ultimate goal is to place the dragged component into a container (i.e., a canvas) that can be visually displayed.

[0112] To create a canvas where components can be placed, the canvas is the currently edited single page. To allow components to be dragged and dropped onto the canvas, the following two steps are required:

[0113] The first step is to define a dropover event for the canvas to specify where the dragged element can be placed. This event needs to prevent the element from being placed on other elements by default, so that the dragged element can be placed on the canvas.

[0114] The second step is to define a drop event for the canvas, which is triggered when an element is placed. After this event is triggered, on the one hand, in order to place the element in the ideal position, the position of the component needs to be calculated based on the current mouse offsetX and offsetY, and then the position is determined by the component's top and left properties; on the other hand, the currently dragged component needs to be obtained from the global variables and rendered according to its rendering function, so that the component is placed at the specified position on the canvas.

[0115] As a preferred embodiment, in step two, when the user selects a composite component, the composite component is dragged into the currently edited single page in a visual manner to realize visual component-based development.

[0116] In a Vue project, the .vue single file acts as a composite component. This composite component can not only import elements from third-party component libraries but also be nested within other composite components. It enables visual component-based development based on this single file.

[0117] like Figure 4 As shown, it includes the following steps:

[0118] Step 201, Add anchor points:

[0119] Since composite components do not have default width and height settings, if the drag-and-drop position (anchor point) is not specified during drag-and-drop, it is impossible to set the width and height of the container on which the composite component is placed. Therefore, the anchor point of the composite component must be set first.

[0120] Add an anchor point at a specified position on the canvas within the currently edited single page, and set drop and dropover events for the anchor point to ensure that the anchor point can hold composite components.

[0121] Step 202, specify the container width and height:

[0122] Specifies the width and height of the container where the anchor point is located, used to place the composite component.

[0123] Composite components differ from third-party component libraries. Third-party components specify default width and height during initialization, allowing them to be inserted into the canvas based on the mouse position and their default dimensions when dragged and dropped. However, composite components are separate Vue single-file applications and do not have default width and height, so the width and height of the insertion container must be specified.

[0124] Step 203: Browse the composite component and drag and drop it into the container, and generate the code.

[0125] In the project's directory structure tree, each node represents a composite component, and each node maps to an actual component file. Before dragging, each node also needs to have `draggable` and `dragstart` events added to it.

[0126] When a composite component is dragged and placed into a container, the real component is located based on the mapping relationship, and the real component is mounted into the container; based on the container position, the corresponding import code and component tag code are generated in the currently edited single page.

[0127] Step 204: Determine whether the composite component needs to communicate with other pages.

[0128] Determine whether the composite component used on the currently edited single page has related data interaction behavior with other pages; if so, define the event visually and realize the interaction through global time bus communication; if not, configure the data of the composite component on the currently edited single page so that the composite component can realize data response in the currently edited single page.

[0129] Step 205: If multiple composite components need to be selected, steps 203 and 204 need to be repeated to complete the single-page development.

[0130] After completing the entire Vue project development process, you can either save the created project in the cloud, allowing users to view all historical Vue projects by logging in with their username and password and edit them online again, or directly export the created project to your local machine for easy use.

[0131] Step 3: Adjust the position and size of the dragged-and-drop components:

[0132] Step 4: Generate code and support secondary development:

[0133] Step 401: Provide a colorless and transparent graphic container area as a canvas for drawing graphics, and control each pixel.

[0134] Step 402 involves dragging and dropping the encapsulated component elements, allowing for flexible placement on the canvas based on position calculations. This enables the generation of Vue-structured front-end code while simultaneously editing the visual page.

[0135] Step 403: The project code can be opened with the editor integrated into the cloud platform, conforming to code standards, highlighting keywords, and supporting online secondary editing.

[0136] Visualization methods are limited to general logical functions; for specific business functions, code must be written to implement them. The aforementioned Vue.js-based visual development tool provides an online editor, allowing for secondary development of the page's source code and re-rendering the page via rendering functions, achieving two-way binding between the page and the code. This editor is similar to VS Code, offering features such as code formatting, keyword highlighting, and commonly used keyboard shortcuts.

[0137] Step 5: Based on the page layout requirements, repeat the methods from Step 2 to Step 4 to complete the development of the single page.

[0138] Comparative Example 1:

[0139] This comparison example uses the paper "Design and Implementation of a Web Front-End Development Tool Based on the Vue.js Framework" proposed by Liu Qiwei of Beijing University of Posts and Telecommunications. This example primarily assists UI designers and front-end developers in page design. After the page design is completed using this tool, it is then handed over to the front-end developers to write the business logic code. This example improves front-end development efficiency to some extent and reduces the workload of front-end engineers. However, this example only supports Vue single-page layout through drag-and-drop basic components; it does not support visual composite component development or business logic development. Visual development has certain limitations and does not reflect the characteristics of Vue component-based development.

[0140] This invention supports dragging and dropping composite components onto other Vue single pages, enabling visual Vue component-based development and greatly improving code reusability and development efficiency. This invention also supports configuring data sources for each component on the page, with the data source obtained in the standard RESTful API format, enabling data interaction with the backend and implementing basic business logic functions.

[0141] Comparative Example 2:

[0142] This comparative example uses the "Design and Implementation of a Vue-based Front-end Development Framework" proposed by Xu Pengtao of Shandong University. This example designs a Vue-based front-end framework, primarily designed to shift developers' focus from complex interaction design to business logic implementation, effectively lowering the barrier to entry and improving the efficiency of front-end development. However, front-end applications developed using this framework are only applicable to that framework, lack general applicability, and cannot be exported locally for secondary use by front-end developers.

[0143] This invention supports generating Vue projects based on the existing mature Vue-cli scaffolding framework, including the entire lifecycle of a front-end project from creation to deployment, and supports exporting the generated Vue project to the local machine for easy reuse, making it universal for front-end engineers using Vue.

[0144] Comparative Example 3:

[0145] This comparative example is Chinese invention patent application publication number CN 110597506 A, entitled "A Front-End Application Visual Development Tool and Usage Method". This comparative example discloses a front-end application visual development tool and usage method, including ECoder software and a material / template library. The functional modules of this visual development tool are largely consistent with the functional modules of this invention; the main difference lies in the page editing module.

[0146] Regarding Embodiment 2 of the present invention Figure 3 The embodiments shown are compared and analyzed with Comparative Example 1, Comparative Example 2, and Comparative Example 3. Figure 3 This is a flowchart of the single-page development mode in this invention. The page development mode in the comparative example mentioned above only supports visual development of the page by dragging and dropping or selecting components. Although it supports generating corresponding source code, it does not support online secondary editing of the generated code within the tool, nor does it support real-time rendering of the page effect onto the canvas of the dragged and dropped components. This invention achieves a dual-mode development approach, combining visual page development with traditional pure code development, thereby further improving development efficiency to a certain extent.

Claims

1. A method for using a visual development tool based on Vue.js, characterized in that, The aforementioned Vue.js-based visual development tool includes the following steps: S101, Creating and Managing Vue Projects: After logging into the Vue.js tool platform, developers can create or import Vue projects in the cloud. Once the Vue project is generated or imported, it can be automatically deployed in the cloud, forming a Vue project visible to any user. S102, Operational Engineering Structure: Open a Vue project in the Vue.js tool platform and manipulate the project structure. There are two ways to create and edit files: one is to design the page by dragging and dropping components and generate Vue structure code; the other is to implement complex business requirements through code based on the generated or imported code. S103, Component-based Development: Building upon single-page applications, component-based development supports dragging and dropping pre-packaged composite components onto the page for reuse, and registering events used for inter-component communication to the global event bus to enable dynamic interaction between components. The component-based development mentioned above refers to breaking down complex business logic into multiple components, with each component's dependent resources being developed and maintained together; these resources include CSS, JS, templates, and images. S104, Complete the development of static pages: Configure data sources for each component of the page. The data sources are obtained in the standard format of RestfulAPI to realize data interaction with the backend and implement basic business logic functions. Finally, it supports exporting the Vue project to the local machine for easy use later. This usage method is a dual-mode development approach for Vue single-page applications, namely visual development and code development. The usage method includes the following steps: Step 1: The user enters the editing page and browses the single components provided in the Vue.js-based visual development tool; Step 2: When a user selects a single component or a composite component composed of multiple single components by browsing the component area, the user drags the single component or composite component to the ideal position on the canvas, which constitutes a valid visual drag and drop. To create a canvas that can hold components, which is the current single-page application being edited, the following two steps are required: The first step is to define a dropover event for the canvas to specify where the dragged element can be placed. This event needs to prevent the element from being placed on the canvas by default. The second step is to define a drop event for the canvas, which is triggered when an element is placed. After the event is triggered, on the one hand, in order to place the element in the ideal position, it is necessary to calculate the placement position of the component based on the current mouse offsetX and offsetY, and then locate the position through the component's top and left properties; on the other hand, it is necessary to get the currently dragged component in the global variables, render it according to its rendering function, and the component is placed in the specified position on the canvas. Step 3: Adjust the position and size of the dragged-and-drop components; Step four: Generate code and support secondary development; Step 5: Based on the page layout requirements, repeat the methods from Step 2 to Step 4 to complete the development of a single page.

2. The method of using the Vue.js-based visual development tool as described in claim 1, characterized in that, Step S101, the specific process of creating and managing a Vue project includes the following steps: S10101, Creation Request: After the developer logs into the Vue.js tool platform from the cloud, the Vue.js tool platform receives the Vue project creation request initiated by the developer; S10102, Get the list of Vue templates in the cloud: Vue templates are pre-set in the cloud, and developers who log in can access a list of Vue templates in the cloud. The Vue templates mentioned include commonly used templates and custom templates; The commonly used templates include the original vue-cli template, templates integrating commonly used third-party libraries, and templates for backend management systems; The custom template mentioned above refers to using an existing Vue project as a template; S10103, Using a template to generate a Vue project: After obtaining the list of Vue templates in the cloud, the developer can then create a Vue project. During the project creation process, several Vue project templates are requested from the cloud. The developer can then select the appropriate template type according to the needs of the project to generate a complete Vue project online. S10104, Automated deployment of Vue projects and storage of related information: S1010401 First, the available port in the cloud is obtained according to the Java ServerSocket.getLocalPort method. This available port is used by the user to run and deploy the Vue project. S1010402 calls the cloud-based npm package management tool and automatically installs project dependencies based on the Vue project's package.json file; S1010403, calls the script to run the Vue project in the cloud and deploys the Vue project to the obtained idle port; S1010404 stores the Vue project name, port number, running status, and user information in a relational database MySQL, facilitating real-time monitoring and management of the project. It uses a timer to poll the running port of the online project to determine the health of the process and promptly repair abnormal projects. It also supports developers to manually set the running status of the project, including launching and decommissioning the project.

3. The method of using the Vue.js-based visual development tool as described in claim 1, characterized in that, In step two, when the user selects a composite component, the composite component is dragged and dropped into the currently edited single page in a visual manner, realizing visual component-based development. This includes the following steps: Step 201, Add anchor points: Add an anchor point at a specified position on the canvas within the currently edited single page, and set drop and dropover events for the anchor point to ensure that the anchor point can hold composite components; Step 202, specify the container width and height: Specifies the width and height of the container where the anchor point is located, used to place the composite component; Step 203: Browse the composite component and drag and drop it into the container, and generate the code; When a composite component is dragged and placed into a container, the real component is located according to the mapping relationship, and the real component is mounted into the container; based on the container position, the corresponding import code and component tag code are generated in the currently edited single page. Step 204: Determine whether the composite component needs to communicate with other pages. Determine whether the composite component used on the currently edited single page has related data interaction behavior with other pages; if so, define the event visually and realize the interaction through global time bus communication; if not, configure the data of the composite component on the currently edited single page so that the composite component can realize data response in the currently edited single page. Step 205: If multiple composite components need to be selected, steps 203 and 204 need to be repeated to complete the single-page development.

4. The method of using the Vue.js-based visual development tool as described in claim 1, characterized in that, Step four, the specific process of generating code and supporting secondary development, includes the following steps: Step 401: Provide a colorless and transparent graphic container area as a canvas for drawing graphics, and be able to control each pixel; Step 402: The encapsulated component elements can be freely laid out on the canvas by dragging and dropping, and the position can be calculated; while visually editing the page, Vue structure front-end code can be generated. Step 403: The project code can be opened with the editor integrated into the cloud platform, conforms to code standards, has keyword highlighting, and supports online secondary editing.

Images