A multi-project development, deployment and operation method and system based on Vue framework

Abstract

The present invention relates to the field of server technology, and in particular to a multi-project development, deployment and operation method and system based on a Vue framework. The method adopts a framework common project and each project has an independent git repository, and each project group develops independently; the common component versions that each project depends on are unified, and are all determined by the framework common project. When an upgrade is required, only the files of the framework common project need to be upgraded, and the business project does not need to be upgraded; the personalized components that each project depends on do not affect each other and have different versions, and are all packaged in the files of each project; the codes between each project are uncoupled; the release risk is low, and the release plans of each project do not affect each other; when each project is updated, it is only necessary to replace the corresponding project packaging files under the framework biz. It is suitable for the development of multiple new projects, and a framework supports multi-project deployment when it is running. The project is deployed into the framework in a plug-in manner, and the resources provided by the public framework are used, and the release and update of each product do not affect each other.

Description

Technical Field

[0001] The present invention relates to the field of server technology, and in particular to a multi-project development, deployment and operation method and system based on a Vue framework. Background Art

[0002] Vue is a js library and does not rely on any other third-party js libraries. The core library of Vue only focuses on the view layer, which is very easy to integrate with other libraries or existing projects. Vue.js is a lightweight, high-performance, componentized MVVM library. Vue is a progressive MVVM framework for building data-driven web interfaces. MVVM is based on the MVC model. MVC is an early back-end development model. If you want to do two-way binding, you can only simulate DOM, but MVVM implements responsive two-way data binding. Its core only focuses on the view layer and is very easy to learn, allowing developers to focus more on the realization of functions instead of wasting time on the design of various events and rendering. In other words, developers only need to focus on how to operate the data, without having to worry about how to render the data on the page for display. Everything is done automatically by Vue.

[0003] There are many front-end frameworks on the market, but none of them can support multi-project deployment with one runtime. They all require new projects to be created and deployed and run independently. They cannot share a third-party component package or a custom JS component library to support the operation of multiple projects. The mainstream front-end frameworks on the market include Vue, React, Angular, Node, etc.

[0004] For example, the steps for setting up a React development project are as follows: Step 1, install Node.js; Step 2, install webpack; Step 3, configure Taobao mirror; Step 4, install create-react-app; Step 5, create a project; Step 6, start the local service; Step 7, package the project and deploy it to the Web server for operation; the native development mode is one project and one project file. The src file in each project is divided according to functional modules. Each sub-folder after division stores the corresponding front-end page files and Js files, and finally references other third-party toolkits or some public JS components encapsulated by yourself; if there is a second project, repeat the above steps again.

[0005] At this time, each project will have an independent project, and the public JS components developed by the project are copied and referenced many times. If the public JS components need to be released, all projects need to be updated and released, which is a lot of work. In order to solve this problem, someone proposed another solution, which is to build a project, reference a public JS component, create subfolders by project in the Views folder, and divide the project subfolders by module function to store the Vue page corresponding to this module. This method seems to solve the problem of updating the public JS component library, but it brings another problem. When it is finally deployed online, it is packaged and deployed online according to the sixth step mentioned above. Several projects are integrated in one project, and finally deployed online together. If only the code of project A has changed, and project B has not been modified, according to this solution, the two projects will be updated and deployed at the same time, and it is easy to cause bugs in project B due to incomplete source code management.

[0006] None of these frameworks can support a running framework that supports multi-project plug-in deployment. The Vue framework is suitable for the development of a single new project. If you want multiple projects, you need to create a new project for each project, and each project needs to reference related third-party component libraries or self-packaged business component libraries. When the component library is updated and upgraded, each project must be operated again, which is time-consuming and labor-intensive, with high update costs and poor maintainability, which is not conducive to project management and development. Summary of the invention

[0007] In view of this, the present invention provides a multi-project development, deployment and operation method and system based on the Vue framework, which is suitable for the development of multiple new projects. One framework supports multi-project deployment during operation. The projects are deployed into the framework in a plug-in manner. The resources provided by the public framework and the release and update of each product do not affect each other.

[0008] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:

[0009] In a first aspect, in an embodiment provided by the present invention, a multi-project development, deployment and operation method based on a Vue framework is provided, the method comprising:

[0010] Create a Vue project through the scaffolding tool of the Vue framework, enter the vue create project name in the terminal, and define the framework public project;

[0011] Use the node command to build and package the framework project, and publish the framework project components to a private image repository;

[0012] Create independent git source code repositories for each business project, set private mirror repository addresses, install public framework component packages, and define each business system project;

[0013] Place the two js files generated by the business project in the biz directory of the public framework deployment package directory;

[0014] Run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file;

[0015] Deploy and run framework public projects and business projects.

[0016] As a further solution of the present invention, when defining a framework public project, it also includes creating a git source code repository for the framework public project, wherein when creating the git source code repository for the framework public project, it is independently developed and maintained by a project team.

[0017] As a further solution of the present invention, when creating a framework public project git source code repository, it also includes:

[0018] Project creation is performed based on the visual interface of the GitLab system, including administrator account login operation before project creation.

[0019] As a further solution of the present invention, the scaffolding tool of the vue framework is vue-cli. When a vue project is created by using the scaffolding tool of the vue framework, it includes:

[0020] Install the node.js runtime environment;

[0021] Install the vue-cli tool and enter the administrator account in the terminal;

[0022] Use vue-cli to create a project and enter vue create project name in the terminal;

[0023] Enter relevant information according to the guidance prompts until the project is successfully created.

[0024] As a further solution of the present invention, in the definition of the framework public project, based on the created framework public project git source code repository, the package.json file of the framework public project is defined: common dependent components and versions, business components, standard functions, hook tool functions, and xdo tool command packages.

[0025] As a further solution of the present invention, when using the node command to build and package the framework project, it includes:

[0026] Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory;

[0027] Use the node command npm publish to publish the framework project components to the private image repository.

[0028] As a further solution of the present invention, when defining each business system project, it also includes:

[0029] The project uses vue's scaffolding tool vue-cli to create its own vue business project;

[0030] Define the dependent personalized components and their versions in the package.json file of each business project;

[0031] Modify the entry file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project;

[0032] Define the webpack packaging process of the business project in the vue.config.js file;

[0033] Use the xdo tool packaging command to generate two js files for the business system.

[0034] As a further solution of the present invention, the deployment and operation of the framework public project and business project include:

[0035] Copy the generated package file to the server;

[0036] Install nginx software on the server, configure the site information, and point the main directory to the dist directory;

[0037] Enter the IP and port information corresponding to nginx in the browser to access the system, dynamically load the js file of the business system, jump to the corresponding route, and present the page information.

[0038] In a second aspect, in another embodiment provided by the present invention, a multi-project development, deployment and operation system based on a Vue framework is provided, comprising:

[0039] The framework project definition module is used to create a Vue project through the scaffolding tool of the Vue framework. Enter the vuecreate project name in the terminal to define the framework public project;

[0040] The packaging and publishing module is used to build and package the framework project using the node command, and publish the framework project components to a private image repository;

[0041] The business system project definition module is used to create an independent git source code repository for each business project, set the private mirror repository address and install the public framework component package, and define each business system project;

[0042] The manifest file generation module is used to run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system manifest file after the two js files generated by the business project are placed in the biz directory of the public framework deployment package directory;

[0043] The project deployment and operation module is used to deploy and run framework public projects and business projects.

[0044] As a further solution of the present invention, it also includes a site configuration module, which is used to perform site configuration information after installing nginx software on the server, point the main directory to the dist directory, so as to browse the page through the browser and access multiple business system pages of the platform.

[0045] In a third aspect, in another embodiment provided by the present invention, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of a multi-project development, deployment and operation method based on a Vue framework when loading and executing the computer program.

[0046] In a fourth aspect, in another embodiment provided by the present invention, a storage medium is provided, which stores a computer program, and when the computer program is loaded and executed by a processor, the steps of the multi-project development, deployment and operation method based on the Vue framework are implemented.

[0047] The technical solution provided by the present invention has the following beneficial effects:

[0048] The invention provides a multi-project development, deployment and operation method and system based on the Vue framework. The framework common project and each project have independent git repositories and are independently developed by each project team. The common component versions that each project depends on are unified and are determined by the framework common project. When an upgrade is required, only the files of the framework common project need to be upgraded, and the business projects do not need to be upgraded. The personalized components that each project depends on do not affect each other and have different versions, and are all packaged in the files of each project. The codes between each project are uncoupled. The release risk is low, and the release plans of each project do not affect each other. When each project is updated, only the corresponding project package files under the framework biz need to be replaced. It is suitable for the development of multiple new projects. One framework supports multi-project deployment when running. Projects are deployed into the framework in a plug-in manner. The resources provided by the common framework are used, and the release and update of each product do not affect each other.

[0049] These and other aspects of the present invention will be more clearly understood in the following description of the embodiments. It should be understood that the above general description and the following detailed description are only exemplary and explanatory and cannot limit the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments or the prior art description. Obviously, the drawings in the following description are only some embodiments of the present invention. In the drawings:

[0051] Figure 1 The present invention is a flowchart of a multi-project development, deployment and operation method based on the Vue framework according to an embodiment of the present invention.

[0052] Figure 2 The present invention is a system block diagram of a multi-project development, deployment and operation system based on the Vue framework according to an embodiment of the present invention. DETAILED DESCRIPTION

[0053] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0054] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0055] It should be understood that the terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in the specification of the present invention and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0056] It should be understood that, in order to clearly describe the technical solutions of the embodiments of the present invention, in the embodiments of the present invention, words such as "first" and "second" are used to distinguish the same or similar items with substantially the same functions and effects. Those skilled in the art can understand that words such as "first" and "second" do not limit the quantity and execution order, and words such as "first" and "second" do not necessarily limit the difference.

[0057] It should be further understood that the term “and / or” used in the present specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0058] There are many front-end frameworks on the market, but none of them can support multi-project deployment with one runtime. They all require new projects to be created and deployed and run independently. They cannot share a third-party component package or a custom JS component library to support the operation of multiple projects. The mainstream front-end frameworks on the market include Vue, React, Angular, Node, etc.

[0059] Therefore, the present invention provides a multi-project development, deployment and operation method and system based on the Vue framework, which is suitable for the development of multiple new projects. One framework supports multi-project deployment during operation. The projects are deployed into this framework in a plug-in manner. The resources provided by the public framework and the release and update of each product do not affect each other.

[0060] Specifically, the embodiments of the present invention are further described below in conjunction with the accompanying drawings.

[0061] See also Figure 1 , Figure 1 is a flowchart of a multi-project development, deployment and operation method based on the Vue framework provided by an embodiment of the present invention, such as Figure 1 As shown, the multi-project development, deployment and operation method based on the Vue framework includes steps S10 to S60.

[0062] S10. Create a Vue project through the scaffolding tool of the Vue framework, enter the vue create project name in the terminal, and define the framework public project.

[0063] In some embodiments, when defining a framework common project, it also includes creating a git source code repository for the framework common project, wherein when creating the git source code repository for the framework common project, it is independently developed and maintained by a project team.

[0064] In some embodiments, when creating a framework public project git source code repository, it also includes:

[0065] Project creation is performed based on the visual interface of the GitLab system, including administrator account login operation before project creation.

[0066] In some embodiments, the scaffolding tool of the vue framework is vue-cli. When creating a vue project through the scaffolding tool of the vue framework, it includes:

[0067] Install the node.js runtime environment;

[0068] Install the vue-cli tool and enter the administrator account in the terminal;

[0069] Use vue-cli to create a project and enter vue create project name in the terminal;

[0070] Enter relevant information according to the guidance prompts until the project is successfully created.

[0071] In some embodiments, in defining a framework common project, based on the created framework common project git source code repository, the package.json file of the framework common project is used to define: common dependency components and versions, business components, standard functions, hook tool functions, and xdo tool command packages.

[0072] S20. Use the node command to build and package the framework project, and publish the framework project components to the private image repository.

[0073] In some embodiments, when using the node command to build and package the framework project, it includes:

[0074] Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory;

[0075] Use the node command npm publish to publish the framework project components to the private image repository.

[0076] S30. Create an independent git source code repository for each business project, set the private mirror repository address and install the public framework component package, and define each business system project.

[0077] In some embodiments, when defining each business system project, it also includes:

[0078] The project uses vue's scaffolding tool vue-cli to create its own vue business project;

[0079] Define the dependent personalized components and their versions in the package.json file of each business project;

[0080] Modify the entry file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project;

[0081] Define the webpack packaging process of the business project in the vue.config.js file;

[0082] Use the xdo tool packaging command to generate two js files for the business system.

[0083] S40. Place the two js files generated by the business project in the biz directory of the public framework deployment package directory;

[0084] S50, run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file;

[0085] S60, deploy and operate framework public projects and business projects.

[0086] In some embodiments, deploying and running framework common projects and business projects includes:

[0087] Copy the generated package file to the server;

[0088] Install nginx software on the server, configure the site information, and point the main directory to the dist directory;

[0089] Enter the IP and port information corresponding to nginx in the browser to access the system, dynamically load the js file of the business system, jump to the corresponding route, and present the page information.

[0090] The multi-project development, deployment and operation method based on the Vue framework provided by the present invention has independent git repositories for the framework common project and each project, and is independently developed by each project group; the common component versions that each project relies on are unified and are determined by the framework common project. When an upgrade is required, only the files of the framework common project need to be upgraded, and the business projects do not need to be upgraded; the personalized components that each project relies on do not affect each other and have different versions, and are all packaged in the files of each project; the codes between each project are uncoupled; the release risk is low, and the release plans of each project do not affect each other; when each project is updated, only the corresponding project packaging files under the framework biz need to be replaced. It is suitable for the development of multiple new projects, and a framework supports multi-project deployment when running. Projects are deployed into this framework in a plug-in manner. The resources provided by the common framework and the release updates of each product do not affect each other.

[0091] Exemplarily, the multi-project development, deployment and operation method based on the Vue framework of the present invention includes the following steps:

[0092] Step 1: Define the framework common project

[0093] (1) Create a git source code repository for the framework public project. This project is independently developed and maintained by a project team;

[0094] (2) Create a Vue project using Vue's scaffolding tool (vue-cli);

[0095] (3) Define common dependency components and their versions in the package.json file of the framework's public project, such as vue, vue-router, vuex, iview, ag-grid, eslint, less, etc.;

[0096] (4) Define common business components in the framework public project, such as public helper classes, custom configuration columns, dynamic forms, and other components;

[0097] (5) Define standard functions in the framework common project, such as login, framework boot, password change, language switching, logout, etc.;

[0098] (6) Define a hook tool function in the framework project to dynamically load the js files of each business system;

[0099] (7) Define the xdo tool command package in the framework project. Its main functions include installing and updating dependent components, checking and updating framework common project components, packaging and generating files for business system deployment, and generating business system list (biz.config.json) files.

[0100] Step 2: Package and publish the framework public project

[0101] (1) Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory, which mainly contains css, js, fonts, img, and some configuration information;

[0102] (2) Use the node command npm publish to publish the framework project components to the private image repository;

[0103] Step 3: Define each business system project

[0104] (1) Create an independent git source code repository for each business project, which is independently developed and maintained by each business project team;

[0105] (2) Set the private image repository address and install the public framework component package;

[0106] (3) The project creates its own Vue business project through Vue's scaffolding tool (vue-cli);

[0107] (4) Define the dependent personalized components and their versions in the package.json file of each business project;

[0108] (5) Modify the entry (main.js) file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project;

[0109] (6) Define the webpack packaging process of the business project in the vue.config.js file;

[0110] (7) Use the xdo tool to package commands to generate two js files for the business system;

[0111] Step 4: Place the js file of the business project in the biz directory of the public framework deployment package directory;

[0112] Step 5: Run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file;

[0113] Step 6: Deploy and run framework public projects and business projects;

[0114] (1) Copy the packaged file (dist directory) generated in step 2 to the server;

[0115] (2) Install nginx software on the server, configure the site information, and point the main directory to the dist directory;

[0116] (3) Enter the IP and port information corresponding to nginx in the browser to access the system. After the user logs in and clicks the system menu, the js file of the business system will be dynamically loaded, jumping to the corresponding route and presenting the page information.

[0117] It should be understood that, although described in a certain order, these steps are not necessarily performed in sequence in the above order. Unless there is clear explanation in this article, the execution of these steps does not have strict order restriction, and these steps can be performed in other orders. Moreover, a part of the steps of the present embodiment may include a plurality of steps or a plurality of stages, and these steps or stages are not necessarily performed at the same time, but can be performed at different times, and the execution order of these steps or stages is not necessarily performed in sequence, but can be performed in turn or alternately with at least a part of the steps or stages in other steps or other steps.

[0118] See also Figure 2 As shown, an embodiment of the present invention provides a multi-project development, deployment and operation system based on the Vue framework, which includes a framework project definition module 100, a packaging and publishing module 200, a business system project definition module 300, a manifest file generation module 400, a project deployment and operation module 500 and a site configuration module 600.

[0119] In the embodiment of the present invention, the framework project definition module 100 is used to create a Vue project through the scaffolding tool of the Vue framework, input the Vue create project name in the terminal, and define the framework public project; the packaging and publishing module 200 is used to use the node command to build and package the framework project, and publish the framework project components to the private image warehouse;

[0120] The business system project definition module 300 is used to create an independent git source code repository for each business project, set the private mirror repository address and install the public framework component package to define each business system project; the manifest file generation module 400 is used to run the xdo toolkit command in the root directory of the public framework deployment package directory after placing the two js files generated by the business project in the biz directory of the public framework deployment package directory to generate a business system manifest file;

[0121] The project deployment and operation module 500 is used to deploy and operate framework public projects and business projects.

[0122] The site configuration module 600 is used to perform site configuration information after installing nginx software on the server, and point the main directory to the dist directory so that the page can be browsed through the browser to access multiple business system pages of the platform.

[0123] The multi-project development, deployment and operation system based on the Vue framework provided by the present invention has independent git repositories for the framework common project and each project, and is independently developed by each project group; the common component versions relied on by each project are unified and are all determined by the framework common project. When an upgrade is required, only the files of the framework common project need to be upgraded, and the business projects do not need to be upgraded; the personalized components relied on by each project do not affect each other and have different versions, and are all packaged in the files of each project; the codes between each project are uncoupled; the release risk is low, and the release plans of each project do not affect each other; when each project is updated, only the corresponding project package files under the framework biz need to be replaced. It is suitable for the development of multiple new projects, and a framework supports multi-project deployment when running. Projects are deployed into this framework in a plug-in manner. The resources provided by the common framework and the release updates between each product do not affect each other.

[0124] It should be noted that the multi-project development, deployment and operation system based on the Vue framework executes a multi-project development, deployment and operation method based on the Vue framework in the aforementioned embodiment. Therefore, the multi-project development, deployment and operation method based on the Vue framework will not be introduced in detail in this embodiment.

[0125] In one embodiment, a computer device is further provided in an embodiment of the present invention, comprising at least one processor, and a memory connected to the at least one processor in communication, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor executes the multi-project development, deployment and operation method based on the Vue framework, and the processor implements the steps in the above-mentioned method embodiments when executing the instructions:

[0126] Step 1: Define the framework common project

[0127] (1) Create a git source code repository for the framework public project. This project is independently developed and maintained by a project team;

[0128] (2) Create a Vue project using Vue's scaffolding tool (vue-cli);

[0129] (3) Define common dependency components and their versions in the package.json file of the framework's public project, such as vue, vue-router, vuex, iview, ag-grid, eslint, less, etc.;

[0130] (4) Define common business components in the framework public project, such as public helper classes, custom configuration columns, dynamic forms, and other components;

[0131] (5) Define standard functions in the framework common project, such as login, framework boot, password change, language switching, logout, etc.;

[0132] (6) Define a hook tool function in the framework project to dynamically load the js files of each business system;

[0133] (7) Define the xdo tool command package in the framework project. Its main functions include installing and updating dependent components, checking and updating framework common project components, packaging and generating files for business system deployment, and generating business system list (biz.config.json) files.

[0134] Step 2: Package and publish the framework public project

[0135] (1) Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory, which mainly contains css, js, fonts, img, and some configuration information;

[0136] (2) Use the node command npm publish to publish the framework project components to the private image repository;

[0137] Step 3: Define each business system project

[0138] (1) Create an independent git source code repository for each business project, which is independently developed and maintained by each business project team;

[0139] (2) Set the private image repository address and install the public framework component package;

[0140] (3) The project creates its own Vue business project through Vue's scaffolding tool (vue-cli);

[0141] (4) Define the dependent personalized components and their versions in the package.json file of each business project;

[0142] (5) Modify the entry (main.js) file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project;

[0143] (6) Define the webpack packaging process of the business project in the vue.config.js file;

[0144] (7) Use the xdo tool to package commands to generate two js files for the business system;

[0145] Step 4: Place the js file of the business project in the biz directory of the public framework deployment package directory;

[0146] Step 5: Run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file;

[0147] Step 6: Deploy and run framework public projects and business projects;

[0148] (1) Copy the packaged file (dist directory) generated in step 2 to the server;

[0149] (2) Install nginx software on the server, configure the site information, and point the main directory to the dist directory;

[0150] (3) Enter the IP and port information corresponding to nginx in the browser to access the system. After the user logs in and clicks the system menu, the js file of the business system will be dynamically loaded, jumping to the corresponding route and presenting the page information.

[0151] In the context, "computer equipment", also called "computer", refers to an intelligent electronic device that can perform predetermined processing processes such as numerical calculations and / or logical calculations by running predetermined programs or instructions. It may include a processor and a memory, and the processor executes the pre-stored instructions in the memory to perform the predetermined processing process, or the hardware such as ASIC, FPGA, DSP, etc. performs the predetermined processing process, or a combination of the above two. Computer equipment includes but is not limited to servers, personal computers, laptops, tablets, smart phones, etc.

[0152] The computer device includes user devices and network devices. The user devices include but are not limited to computers, smart phones, PDAs, etc. The network devices include but are not limited to a single network server, a server group consisting of multiple network servers, or a cloud consisting of a large number of computers or network servers based on cloud computing (Cloud Computing), wherein cloud computing is a type of distributed computing, a super virtual computer consisting of a group of loosely coupled computer sets. The computer device can be operated alone to implement the present invention, or it can be connected to the network and implement the present invention through interactive operations with other computer devices in the network. The network where the computer device is located includes but is not limited to the Internet, wide area network, metropolitan area network, local area network, VPN network, etc.

[0153] In one embodiment of the present invention, a storage medium is further provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above method embodiments are implemented:

[0154] Step 1: Define the framework common project

[0155] (1) Create a git source code repository for the framework public project. This project is independently developed and maintained by a project team;

[0156] (2) Create a Vue project using Vue's scaffolding tool (vue-cli);

[0157] (3) Define common dependency components and their versions in the package.json file of the framework's public project, such as vue, vue-router, vuex, iview, ag-grid, eslint, less, etc.;

[0158] (4) Define common business components in the framework public project, such as public helper classes, custom configuration columns, dynamic forms, and other components;

[0159] (5) Define standard functions in the framework common project, such as login, framework boot, password change, language switching, logout, etc.;

[0160] (6) Define a hook tool function in the framework project to dynamically load the js files of each business system;

[0161] (7) Define the xdo tool command package in the framework project. Its main functions include installing and updating dependent components, checking and updating framework common project components, packaging and generating files for business system deployment, and generating business system list (biz.config.json) files.

[0162] Step 2: Package and publish the framework public project

[0163] (1) Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory, which mainly contains css, js, fonts, img, and some configuration information;

[0164] (2) Use the node command npm publish to publish the framework project components to the private image repository;

[0165] Step 3: Define each business system project

[0166] (1) Create an independent git source code repository for each business project, which is independently developed and maintained by each business project team;

[0167] (2) Set the private image repository address and install the public framework component package;

[0168] (3) The project creates its own Vue business project through Vue's scaffolding tool (vue-cli);

[0169] (4) Define the dependent personalized components and their versions in the package.json file of each business project;

[0170] (5) Modify the entry (main.js) file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project;

[0171] (6) Define the webpack packaging process of the business project in the vue.config.js file;

[0172] (7) Use the xdo tool to package commands to generate two js files for the business system;

[0173] Step 4: Place the js file of the business project in the biz directory of the public framework deployment package directory;

[0174] Step 5: Run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file;

[0175] Step 6: Deploy and run framework public projects and business projects;

[0176] (1) Copy the packaged file (dist directory) generated in step 2 to the server;

[0177] (2) Install nginx software on the server, configure the site information, and point the main directory to the dist directory;

[0178] (3) Enter the IP and port information corresponding to nginx in the browser to access the system. After the user logs in and clicks the system menu, the js file of the business system will be dynamically loaded, jumping to the corresponding route and presenting the page information.

[0179] A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided by the present invention can include at least one of non-volatile and volatile memory.

[0180] To sum up, the multi-project development, deployment and operation method and system based on the Vue framework provided by the present invention are suitable for the development of multiple new projects. One framework supports multi-project deployment during operation. The projects are deployed to this framework in a plug-in manner. The resources provided by the public framework and the release and update of each product do not affect each other.

[0181] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A multi-project development, deployment and operation method based on the Vue framework, characterized in that: The method includes: Create a Vue project through the scaffolding tool of the Vue framework, enter vue create project name in the terminal, and define the framework public project; Use the node command to build and package the framework project, and publish the framework project components to a private image repository; Create independent git source code repositories for each business project, set private mirror repository addresses, install public framework component packages, and define each business system project; Place the two js files generated by the business project in the biz directory of the public framework deployment package directory; Run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system list file; Deploy and operate framework public projects and business projects; When defining each business system project, it also includes: The project uses vue's scaffolding tool vue-cli to create its own vue business project; Define the dependent personalized components and their versions in the package.json file of each business project; Modify the entry file of the business project, delete the default loading code of the Vue project, and register the project to the public framework as a plug-in. During registration, the router information and state information of the business system will be added to the router and state corresponding to the framework project; Define the webpack packaging process of the business project in the vue.config.js file; Use the xdo tool packaging command to generate two js files for the business system; Deploy and run framework public projects and business projects, including: Copy the generated package file to the server; Install nginx software on the server, configure the site information, and point the main directory to the dist directory; Enter the IP and port information corresponding to nginx in the browser to access the system, dynamically load the js file of the business system, jump to the corresponding route, and present the page information.

2. The multi-project development, deployment and operation method based on the Vue framework as claimed in claim 1, characterized in that: When defining a framework public project, it also includes creating a git source code repository for the framework public project. When creating the git source code repository for the framework public project, it is independently developed and maintained by a project team.

3. The multi-project development, deployment and operation method based on the Vue framework as claimed in claim 2 is characterized in that: When creating a framework public project git source code repository, also include: Project creation is performed based on the visual interface of the GitLab system, including administrator account login operation before project creation.

4. The multi-project development, deployment and operation method based on the Vue framework as claimed in claim 3 is characterized in that: The scaffolding tool of the vue framework is vue-cli. When creating a vue project through the scaffolding tool of the vue framework, it includes: Install the node.js runtime environment; Install the vue-cli tool and enter the administrator account in the terminal; Use vue-cli to create a project and enter vue create project name in the terminal; Enter relevant information according to the guidance prompts until the project is successfully created.

5. The multi-project development, deployment and operation method based on the Vue framework as claimed in claim 4 is characterized in that: Define the framework public project, based on the created framework public project git source code repository, through the framework public project package.json file definition: public dependency components and versions, business components, standard functions, hook tool functions, xdo tool command package.

6. The multi-project development, deployment and operation method based on the Vue framework as claimed in claim 5, characterized in that: When using the node command to build and package the framework project, it includes: Use the node commands npm install and npm run build to build and package the framework project and generate a deployment dist directory; Use the node command npm publish to publish the framework project components to the private image repository.

7. A multi-project development, deployment and operation system based on the Vue framework, characterized in that: The multi-project development, deployment and operation system based on the Vue framework is used to execute the multi-project development, deployment and operation method based on the Vue framework according to any one of claims 1 to 6; The multi-project development, deployment and operation system based on the Vue framework includes: The framework project definition module is used to create a Vue project through the scaffolding tool of the Vue framework. Enter vuecreate project name in the terminal to define the framework public project; The packaging and publishing module is used to build and package the framework project using the node command, and publish the framework project components to a private image repository; The business system project definition module is used to create an independent git source code repository for each business project, set the private mirror repository address and install the public framework component package, and define each business system project; The manifest file generation module is used to run the xdo toolkit command in the root directory of the public framework deployment package to generate a business system manifest file after the two js files generated by the business project are placed in the biz directory of the public framework deployment package directory; The project deployment and operation module is used to deploy and run framework public projects and business projects.

8. The multi-project development, deployment and operation system based on the Vue framework as claimed in claim 7, characterized in that: The multi-project development, deployment and operation system based on the Vue framework also includes a site configuration module, which is used to perform site configuration information after installing nginx software on the server, point the main directory to the dist directory, and browse the page through the browser to access multiple business system pages of the platform.

Images