CN115328462A - 一种基于Vue.js的可视化开发工具及使用方法 - Google Patents

Abstract

本发明提供一种基于Vue.js的可视化开发工具及使用方法，工具包括以下步骤：S101，创建和管理Vue项目；S102，操作工程结构；S103，组件化开发；S104，完成静态页面的开发。该使用方法为Vue单页面的双模式开发方式，所述的双模式开发方式分别是可视化开发和代码开发方式。本发明主要适用于基于Vue框架的应用开发使用，为前端应用提供可视化便捷开发方式。与传统的前端开发模式和现有的Web前端开发工具相比较：该工具将vue项目云化管理，开发者可以在云端快速搭建、自动化部署和管理vue项目。该工具集成了第三方成熟的组件和架构，进一步提高了该工具的功能和性能。开发者使用该工具可以从零开始，创建一个完整的可二次开发的Vue应用或者导入一个Vue项目继续二次开发。

Description

一种基于Vue.js的可视化开发工具及使用方法

技术领域

本发明属于Web前端可视化开发技术领域，涉及可视化开发工具，具体涉及一种基于Vue.js的可视化开发工具及使用方法。

背景技术

随着新一代信息技术的发展，软件产业作为国家的基础性、战略性、先导性产业，对经济社会发展具有重要的支撑和引领作用。其中Web应用在软件开发和应用探索中占据主导地位，越来越多的行业将其应用到信息化、智能化和数字化的过程中。在目前主流的Web前后端分离的开发模式下，前端应用呈现出越来越复杂，越来越庞大的特点。从开发角度分析，前端应用中存在很多重复性的通用功能，同时也包含各领域的个性化业务功能。对开发者来说，重复性的通用功能占据大量的开发时间，大量的重复性劳动不仅影响了开发者的工作效率，也制约着开发者技术的成长。所以，通过一定的技术手段改善传统的纯代码研发手段，减少冗杂的、重复性的编码工作，提高代码复用率和开发效率，使开发者更聚焦于特定领域的功能开发，在Web前端开发中具有极其重要的意义。

与传统的编程方式相比，可视化编程以“所见即所得”的编程思想为原则，让开发者利用软件本身所提供的各种控件，像搭积木式地构造应用程序的各个界面。在很大程度上，避免了大量重复性的劳动，同时提高了代码复用率。以可视化编程思想为核心的应用开发工具，改变了传统的纯代码开发模式，实现可视化、便捷式搭建Web应用。目前，较为热门的Web前端可视化开发工具主要分为两类。第一类，零代码工具，其面向非专业开发者，仅支持使用工具现有的功能搭建应用，对于特定的应用场景，不支持个性化需求开发。第二类，低代码工具，通过无代码式的拖放形式结合少量编码搭建应用。但目前热门的前端低代码工具都是基于原生编程语言，生成的源代码不支持主流的前端技术框架，不符合组件化编程思想，存在大量的冗余代码，代码复用率极低。

在Web应用开发过程中，Vue.js作为一款友好的、多用途且高性能的JavaScript框架，与React、Angular被统称为前端三大主流框架。使用Vue可以创建可维护性和可测试性更强的代码库，Vue不仅易于上手，还便于与第三方库或既有项目整合，所以目前被大家广泛使用。

通过以上分析，如何解决前端传统开发方式和现有的可视化编程工具在开发过程中存在的问题，为前端开发者提供一种快速、安全和兼容性高的开发工具是目前需要解决的关键问题。

发明内容

针对现有技术存在的不足，本发明的目的在于，提供一种基于Vue.js的可视化开发工具及使用方法，以解决现有技术中的前端开发工具的性能有待进一步提升的技术问题。

为了解决上述技术问题，本发明采用如下技术方案予以实现：

一种基于Vue.js的可视化开发工具，该可视化开发工具包括以下步骤：

S101，创建和管理Vue项目：

开发者登陆Vue.js工具平台后，实现在云端新建或导入Vue工程，完成生成或导入Vue工程后，该Vue工程能够自动部署在云端，形成对任意用户可见的Vue项目；

S102，操作工程结构：

在Vue.js工具平台中打开Vue工程，对工程结构进行操作，新建并编辑文件包含两种方式，一种方式为通过拖放组件进行页面设计，在该过程中生成Vue结构的代码；另一种方式为基于生成或导入的代码，通过代码实现复杂的业务需求；

S103，组件化开发：

在单页面的基础上，组件化开发支持将封装好的复合组件拖放到其他页面实现页面复用，将用于组件间通信的事件注册到全局事件总线，实现组件间的动态交互；

所述的组件化开发指的是将复杂的业务拆分为多个组件，每个组件依赖的资源放在一起开发和维护；所述的资源包括CSS、JS、模板和图片；

S104，完成静态页面的开发：

为页面的各个组件配置数据源，数据源以RestfulApi的标准格式获取，实现与后端的数据交互，实现基础的业务逻辑功能；最后支持将Vue工程导出至本地，便于后续使用。

本发明还具有如下技术特征：

优选的，步骤S101中，创建和管理Vue项目的具体过程包括以下步骤：

S10101，创建请求：

开发者从云端登陆Vue.js工具平台后，Vue.js工具平台接收到开发者发起的Vue工程创建请求；

S10102，获取云端Vue模板列表：

在云端预设Vue模板，登录后的开发者能够获取云端Vue模板列表；

所述的Vue模板包括常用模板和自定义模板；

所述的常用模板包括vue-cli原始模板、集成常用第三方库模板和后台管理系统模板；

所述的自定义模板是指将已有的vue工程作为模板；

S10103，引用模板生成Vue工程：

开发者获取云端Vue模板列表后，然后创建Vue工程；在创建工程的过程中，从云端请求到若干Vue工程模板，开发者能够根据本次工程的需要，选择符合的模板类型，即可在线生成一个完整的Vue工程；

S10104，Vue工程自动化部署以及相关信息的存储：

S1010401，首先根据Java的ServerSocket.getLocalPort方法获取云端空闲端口，该空闲端口用于用户运行和部署vue工程；

S1010402，调用云端npm包管理工具，并根据vue工程的package.json自动安装工程依赖；

S1010403，调用云端vue工程运行脚本，将vue工程部署到获取的空闲端口上；

S1010404，将Vue工程的工程名、端口号、运行状态和所属用户信息存储在关系型数据库mysql中，方便实时监控并管理工程；通过定时器轮询线上工程的运行端口，判断该进程是否健康，对异常工程及时进行修复；同时支持开发者手动设置工程的运行状态，包括对项目的上线和下线。

本发明还保护一种如上所述的基于Vue.js的可视化开发工具的使用方法，该使用方法为Vue单页面的双模式开发方式，所述的双模式开发方式分别是可视化开发和代码开发方式；

该使用方法包括以下步骤：

步骤一，用户进入编辑页面，浏览所述的基于Vue.js的可视化开发工具中提供的单组件；

步骤二，用户通过浏览组件区选择需要的单组件，或用户选择由多个单组件组合成的复合组件时，将单组件或复合组件拖动到画布的理想位置，即为一次合法的可视化拖放；

构建可放置组件的画布，画布即为当前编辑的单页面，为了满足组件可被拖放到画布，需要执行以下两步：

第一步，给画布定义dropover事件来规定被拖动的元素可被放置到何处，该事件需要阻止元素不可被放置到其他元素的默认属性，被拖动的元素才能够放到画布上；

第二步，给画布定义drop事件，该事件在放置元素时触发；该事件触发后，一方面为了使元素能被放置到理想的位置，需要根据当前鼠标的offsetX和offsetY计算组件放置的位置，然后通过组件的top和left属性来定位位置；另一方面需要在全局变量中获取到当前被拖动组件，根据其渲染函数进行渲染，组件就被放到画布的指定位置；

步骤三，调整拖放过来的组件的位置和大小；

步骤四，生成代码并支持二次开发；

步骤五，根据页面布局需求，重复步骤二至步骤四的方法，便可完成单页面的开发。

优选的，步骤二中，用户选择复合组件时，复合组件通过可视化的方式拖动到当前编辑的单页面中，实现可视化组件化开发，具体包括以下步骤：

步骤201，添加锚点：

在当前编辑的单页面中中画布的制定位置添加锚点，对锚点设置drop事件和dropover事件，保证锚点能够放置复合组件；

步骤202，指定容器宽高：

指定锚点所在的用于放置复合组件的容器的宽高；

步骤203，浏览复合组件并拖放其至容器，并生成代码；

拖动复合组件将其放置到容器中时，根据映射关系找到真实组件，将真实组件挂载到该容器中；根据容器位置在当前编辑的单页面中生成对应的import代码以及组件标签代码；

步骤204，判断该复合组件是否需要与其它页面进行通信：

判断在当前编辑的单页面使用的复合组件是否与其它页面有相关联的数据交互行为；若有，则可视化定义事件，通过全局时间总线通信方式实现交互；若无，则在当前编辑的单页面对复合组件进行数据配置，使复合组件在当前编辑的单页面中实现数据响应；

步骤205，若需要选择多个复合组件，则需要重复步骤203和步骤204，最终完成单页面开发。

优选的，步骤四中，生成代码并支持二次开发的具体过程包括以下步骤：

步骤401，提供一块无色透明的图形容器区域作为画布，用于绘制图形，并且可以控制每一像素；

步骤402，将封装好的组件元素通过拖放的方式，通过位置的计算可自由布局在画布上。可视化编辑页面的同时，可生成Vue结构的前端代码；

步骤403，工程代码可用该云平台集成的编辑器打开，符合代码规范，关键词高亮，并且支持在线二次编辑。

本发明与现有技术相比，具有如下技术效果：

(Ⅰ)本发明的基于Vue.js的可视化开发工具主要适用于基于Vue框架的应用开发使用，为前端应用提供可视化便捷开发方式。与传统的前端开发模式和现有的Web前端开发工具相比较：该工具将vue项目云化管理，开发者可以在云端快速搭建、自动化部署和管理vue项目。该工具集成了第三方成熟的组件和架构，进一步提高了该工具的功能和性能。开发者使用该工具可以从零开始，创建一个完整的可二次开发的Vue应用或者导入一个Vue项目继续二次开发。

(Ⅱ)本发明的开发工具针对Web前端应用开发，提供了一种同时支持两种开发模式的开发工具，分别是纯代码模式和可视化编程模式。该开发工具实现可视化搭建Web前端应用，改善了传统开发方式，避免了大量的重复性劳动，提高代码复用率。该开发工具面向开发者，实现可视化搭建过程中生成源代码，并支持在线进行二次开发，满足各类业务需求。该开发工具通过引入组件化开发方式，构建出低耦合、高内聚、可复用的前端代码，进一步提高前端应用的开发效率。

(Ⅲ)本发明的开发工具，解决了Web前端传统开发过程中和现有的可视化编程工具在开发前端过程中存在的大量重复性工作、开发效率低、代码复用率低等问题。开发者可以基于本发明的开发工具通过可视化拖放组件和传统代码开发的方式。

附图说明

图1是本发明中所述的可视化开发工具的流程图。

图2是创建和管理Vue项目的原理图。

图3是Vue单页面的双模式开发方式的流程图。

图4是组件化开发方法的一种实施方式的流程图。

以下结合实施例对本发明的具体内容作进一步详细解释说明。

具体实施方式

需要说明的是，本发明中的所有的设备和算法，如无特殊说明，全部均采用现有技术中已知的设备和算法。

遵从上述技术方案，以下给出本发明的具体实施例，需要说明的是本发明并不局限于以下具体实施例，凡在本申请技术方案基础上做的等同变换均落入本发明的保护范围。

实施例1：

本实施例给出一种基于Vue.js的可视化开发工具，如图1所示，该可视化开发工具包括以下步骤：

S101，创建和管理Vue项目：

开发者登陆Vue.js工具平台后，实现在云端新建或导入Vue工程，完成生成或导入Vue工程后，该Vue工程能够自动部署在云端，形成对任意用户可见的Vue项目。

开发者基于云端完成Vue工程开发的整个生命周期，对Vue工程的基础操作内容包括：在线更改Vue项目的目录结构。具体包括：新建文件夹、删除文件夹、重命名文件夹。单个文件同时也具有新建、删除、重命名功能。

作为本实施例的一种优选方案，步骤S101中，如图2所示，创建和管理Vue项目的具体过程包括以下步骤：

S10101，创建请求：

开发者从云端登陆Vue.js工具平台后，Vue.js工具平台接收到开发者发起的Vue工程创建请求。

S10102，获取云端Vue模板列表：

在云端预设Vue模板，登录后的开发者能够获取云端Vue模板列表。

所述的Vue模板包括常用模板和自定义模板。

所述的常用模板包括vue-cli原始模板、集成常用第三方库模板和后台管理系统模板。

所述的自定义模板是指将已有的vue工程作为模板。

为了使用户创建的Vue工程更符合自身需求，本工具提供模板功能，分别是常用模板和自定义模板，用户可以引用模板来快速搭建工程。

常用模板分别是：

vue-cli原始模板：vue官方提供的脚手架模板，是一个纯净的模板，相较于其他模板，该模板可以根据业务需求来选择对于的技术栈。

集成常用第三方库模板：该模板集成了热门的第三方库，如vuex、element-ui和vue-router等，免去了一些重复的工作。

后台管理系统模板：该模板为一个通用的后台管理系统，具备用户管理、权限管理、系统管理等后台管理系统的通用功能，提高开发者的开发效率。

自定义模板是指将已有的vue工程作为模板，该工程可以是用户导入的，也可以是通过该工具构建的工程。引入自定义模板的好处是，用户可以根据技术栈或通用业务搭建一个通用的工程模板，开发新工程时可灵活选择，快读搭建。

S10103，引用模板生成Vue工程：

开发者获取云端Vue模板列表后，然后创建Vue工程。在创建工程的过程中，从云端请求到若干Vue工程模板，开发者能够根据本次工程的需要，选择符合的模板类型，即可在线生成一个完整的Vue工程。

S10104，Vue工程自动化部署以及相关信息的存储：

为了使vue工程实时运行和自动化部署和管理。具体实施方式如下：

S1010401，首先根据Java的ServerSocket.getLocalPort方法获取云端空闲端口，该空闲端口用于用户运行和部署vue工程。

S1010402，调用云端npm包管理工具，并根据vue工程的package.json自动安装工程依赖。

S1010403，调用云端vue工程运行脚本，将vue工程部署到获取的空闲端口上。

S1010404，将Vue工程的工程名、端口号、运行状态和所属用户信息存储在关系型数据库mysql中，方便实时监控并管理工程；通过定时器轮询线上工程的运行端口，判断该进程是否健康，对异常工程及时进行修复；同时支持开发者手动设置工程的运行状态，包括对项目的上线和下线。

至此完成了vue工程的创建以及自动化部署。开发者可以在该工具上开始对该工程双模式开发，该工程面向的用户也可以通过云端的ip以及端口访问。

S102，操作工程结构：

在Vue.js工具平台中打开Vue工程，对工程结构进行操作，新建并编辑文件包含两种方式，一种方式为通过拖放组件进行页面设计，在该过程中生成Vue结构的代码；另一种方式为基于生成或导入的代码，通过代码实现复杂的业务需求。

S103，组件化开发：

在单页面的基础上，组件化开发支持将封装好的复合组件拖放到其他页面实现页面复用，将用于组件间通信的事件注册到全局事件总线，实现组件间的动态交互。

所述的组件化开发指的是将复杂的业务拆分为多个组件，每个组件依赖的资源放在一起开发和维护；所述的资源包括CSS(Cascading Style Sheet，层叠样式表)、JS(JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言)、模板和图片。

因为组件是资源独立的，所以组件在系统内部可复用，且可以极大简化代码量，对后期的需求变更和维护也更加友好。在双模式完成单页面的开发后，实现组件化可视化开发，不仅包括第三方组件，也支持将一个单文件组件通过拖放的方式放置在另一个单页面使用。

S104，完成静态页面的开发：

为页面的各个组件配置数据源，数据源以RestfulApi的标准格式获取，实现与后端的数据交互，实现基础的业务逻辑功能；最后支持将Vue工程导出至本地，便于后续使用。

实施例2：

本实施例给出一种实施例1中给出的基于Vue.js的可视化开发工具的使用方法，该使用方法为Vue单页面的双模式开发方式，所述的双模式开发方式分别是可视化开发和代码开发方式。

如图3所示，该使用方法包括以下步骤：

步骤一，用户进入编辑页面，浏览所述的基于Vue.js的可视化开发工具中提供的单组件。

步骤二，用户通过浏览组件区选择需要的单组件，或用户通过选择由多个单组件组合成的复合组件时，将单组件或复合组件拖动到画布的理想位置，即为一次合法的可视化拖放。

为了实现可视化拖放，本发明需形成可拖动的第三方组件库，首先需要形成组件区，组件区由组件数组遍历展示，第三方组件通过注册方法添加到数组中，注册方法需要传递组件的label标识以及render()渲染函数。数组遍历时给组件统一添加draggable属性，使区域中的组件可以被拖动，并统一添加dragstart方法，该方法将被拖动的元素记录到全局变量中。

拖动组件是开始行为，将拖动的组件放置在一个可以可视化展示的容器(即画布)中是最终目的。

构建可放置组件的画布，画布即为当前编辑的单页面，为了满足组件可被拖放到画布，需要执行以下两步：

第一步，给画布定义dropover事件来规定被拖动的元素可被放置到何处，该事件需要阻止元素不可被放置到其他元素的默认属性，被拖动的元素才能够放到画布上。

第二步，给画布定义drop事件，该事件在放置元素时触发。该事件触发后，一方面为了使元素能被放置到理想的位置，需要根据当前鼠标的offsetX和offsetY计算组件放置的位置，然后通过组件的top和left属性来定位位置；另一方面需要在全局变量中获取到当前被拖动组件，根据其渲染函数进行渲染，组件就被放到画布的指定位置。

作为本实施例的一种优选方案，步骤二中，用户选择复合组件时，复合组件通过可视化的方式拖动到当前编辑的单页面中，实现可视化组件化开发；

Vue工程中的.vue单文件作为一个复合组件，该复合组件不仅是可以引入第三方组件库中的元素，同时也可以嵌套到其他复合组件中。在单文件基础上，实现可视化组件化开发。

如图4所示，包括以下步骤：

步骤201，添加锚点：

复合组件没有设置默认宽高，在拖放时，如果不指定拖放位置，即锚点。则没有办法设置复合组件放置容器的宽高，所以首先需要设置复合组件的锚点。

在当前编辑的单页面中中画布的制定位置添加锚点，对锚点设置drop事件和dropover事件，保证锚点能够放置复合组件。

步骤202，指定容器宽高：

指定锚点所在的用于放置复合组件的容器的宽高。

复合组件不同于第三方组件库，第三方组件在初始化时指定了默认宽高，在拖放第三方组件时，根据鼠标位置以及默认宽高就可以插入到画布中。但复合组件是其他vue单文件，没有默认宽高，所以需要指定插入容器的宽高。

步骤203，浏览复合组件并拖放其至容器，并生成代码。

项目的目录结构树中每个节点表示一个复合组件，每个节点映射到真实的组件文件上。在拖动之前，同样需要给每个节点添加draggable和dragstart事件。

拖动复合组件将其放置到容器中时，根据映射关系找到真实组件，将真实组件挂载到该容器中；根据容器位置在当前编辑的单页面中生成对应的import代码以及组件标签代码。

步骤204，判断该复合组件是否需要与其它页面进行通信：

判断在当前编辑的单页面使用的复合组件是否与其它页面有相关联的数据交互行为；若有，则可视化定义事件，通过全局时间总线通信方式实现交互；若无，则在当前编辑的单页面对复合组件进行数据配置，使复合组件在当前编辑的单页面中实现数据响应。

步骤205，若需要选择多个复合组件，则需要重复步骤203和步骤204，最终完成单页面开发。

在完成整个Vue工程的开发过程后，一方面可以将创建的工程一直保存在云端，用户登录用户名和密码，可以查看所有的历史Vue工程，支持再次进行在线编辑；另一方面也可以直接将创建好的工程直接导出至本地，便于使用。

步骤三，调整拖放过来的组件的位置和大小：

步骤四，生成代码并支持二次开发：

步骤401，提供一块无色透明的图形容器区域作为画布，用于绘制图形，并且可以控制每一像素。

步骤402，将封装好的组件元素通过拖放的方式，通过位置的计算可自由布局在画布上。可视化编辑页面的同时，可生成Vue结构的前端代码。

步骤403，工程代码可用该云平台集成的编辑器打开，符合代码规范，关键词高亮，并且支持在线二次编辑。

可视化方式局限在通用的逻辑功能，对于特定的业务功能，就需要通过编写代码进行实现。所述的基于Vue.js的可视化开发工具提供在线编辑器，通过编辑器对页面的源码进行二次开发，并通过渲染函数重新渲染页面，实现页面和代码的双向绑定。该编辑器类似于vscode，提供代码格式化、关键字高亮、常用快捷键等功能。

步骤五，根据页面布局需求，重复步骤二至步骤四的方法，便可完成单页面的开发。

对比例1：

本对比例选取的是北京邮电大学刘启伟提出的《基于Vue.js框架的Web前端开发工具的设计与实现》。该对比例主要用于辅助UI设计师和前端开发工程师进行页面设计工作，使用本工具完成页面设计后，再交给前端开发工程师编写业务逻辑代码。本对比例在一定程度上提高前端开发效率，减少前端工程师的工作量。但本对比例只支持通过拖放基础组件实现Vue单页面布局，不支持可视化复合组件化开发，不支持对业务逻辑开发，可视化开发具有一定的局限性，没有体现Vue组件化开发的特点。

本发明支持将复合组件拖放到其他Vue单页面，可视化实现Vue组件化开发，极大的提高了代码复用率和开发效率。本发明支持为页面的各个组件配置数据源，数据源以RestfulApi的标准格式获取，实现与后端的数据交互，实现了基础的业务逻辑功能。

对比例2：

本对比例选取的是山东大学徐鹏涛提出的《基于Vue的前端开发框架的设计与实现》。本对比例设计了一种基于Vue的前端框架，主要用于解决将开发者重心从复杂的交互设计转移到业务逻辑的实现，有效降低前端开发的门槛，提高了前端开发的效率。但本对比例设计的框架开发的前端应用只适用于在该框架，不具有通用性，无法导出至本地，供前端开发工程师二次使用。

本发明支持基于现有成熟的Vue-cli脚手架框架生成Vue项目，包含一个前端项目从创建到部署的整个生命周期，并且支持将生成的Vue项目导出至本地，便于二次使用，对使用Vue开发的前端工程师具有通用性。

对比例3：

本对比例为申请公布号为CN 110597506 A，名称为：“一种前端应用可视化开发工具和使用方法”的中国发明专利。本对比例公开了一种前端应用可视化开发工具和使用方法，包括ECoder软件和物料/模板库。该可视化开发工具的功能模块与本发明的功能模块很大程度上一致，区别主要体现在页面编辑模块。

对本发明实施例2的图3所示的实施方式、对比例1、对比例2和对比例3进行对比分析，图3是本发明中单页面开发模式流程图，以上所提到的对比例中页面开发模式仅支持以拖拽或勾选组件的方式实现页面的可视化开发，虽然支持生成对应的源代码，但是并不支持在该工具内实现在线对生成的代码二次编辑，并实时将页面效果渲染到拖放组件的画布上。本发明实现了页面的可视化开发和传统的纯代码双模式开发方式，从一定程度上，进一步提高开发效率。

Claims (5)

1.一种基于Vue.js的可视化开发工具，其特征在于，该可视化开发工具包括以下步骤：

S101，创建和管理Vue项目：

开发者登陆Vue.js工具平台后，实现在云端新建或导入Vue工程，完成生成或导入Vue工程后，该Vue工程能够自动部署在云端，形成对任意用户可见的Vue项目；

S102，操作工程结构：

在Vue.js工具平台中打开Vue工程，对工程结构进行操作，新建并编辑文件包含两种方式，一种方式为通过拖放组件进行页面设计，在该过程中生成Vue结构的代码；另一种方式为基于生成或导入的代码，通过代码实现复杂的业务需求；

S103，组件化开发：

在单页面的基础上，组件化开发支持将封装好的复合组件拖放到其他页面实现页面复用，将用于组件间通信的事件注册到全局事件总线，实现组件间的动态交互；

所述的组件化开发指的是将复杂的业务拆分为多个组件，每个组件依赖的资源放在一起开发和维护；所述的资源包括CSS、JS、模板和图片；

S104，完成静态页面的开发：

为页面的各个组件配置数据源，数据源以RestfulApi的标准格式获取，实现与后端的数据交互，实现基础的业务逻辑功能；最后支持将Vue工程导出至本地，便于后续使用。

2.如权利要求1所述的基于Vue.js的可视化开发工具，其特征在于，步骤S101中，创建和管理Vue项目的具体过程包括以下步骤：

S10101，创建请求：

开发者从云端登陆Vue.js工具平台后，Vue.js工具平台接收到开发者发起的Vue工程创建请求；

S10102，获取云端Vue模板列表：

在云端预设Vue模板，登录后的开发者能够获取云端Vue模板列表；

所述的Vue模板包括常用模板和自定义模板；

所述的常用模板包括vue-cli原始模板、集成常用第三方库模板和后台管理系统模板；

所述的自定义模板是指将已有的vue工程作为模板；

S10103，引用模板生成Vue工程：

开发者获取云端Vue模板列表后，然后创建Vue工程；在创建工程的过程中，从云端请求到若干Vue工程模板，开发者能够根据本次工程的需要，选择符合的模板类型，即可在线生成一个完整的Vue工程；

S10104，Vue工程自动化部署以及相关信息的存储：

S1010401，首先根据Java的ServerSocket.getLocalPort方法获取云端空闲端口，该空闲端口用于用户运行和部署vue工程；

S1010402，调用云端npm包管理工具，并根据vue工程的package.json自动安装工程依赖；

S1010403，调用云端vue工程运行脚本，将vue工程部署到获取的空闲端口上；

S1010404，将Vue工程的工程名、端口号、运行状态和所属用户信息存储在关系型数据库mysql中，方便实时监控并管理工程；通过定时器轮询线上工程的运行端口，判断该进程是否健康，对异常工程及时进行修复；同时支持开发者手动设置工程的运行状态，包括对项目的上线和下线。

3.一种如权利要求1或2所述的基于Vue.js的可视化开发工具的使用方法，其特征在于，该使用方法为Vue单页面的双模式开发方式，所述的双模式开发方式分别是可视化开发和代码开发方式；

该使用方法包括以下步骤：

步骤一，用户进入编辑页面，浏览所述的基于Vue.js的可视化开发工具中提供的单组件；

步骤二，用户通过浏览组件区选择需要的单组件，或用户选择由多个单组件组合成的复合组件时，将单组件或复合组件拖动到画布的理想位置，即为一次合法的可视化拖放；

构建可放置组件的画布，画布即为当前编辑的单页面，为了满足组件可被拖放到画布，需要执行以下两步：

第一步，给画布定义dropover事件来规定被拖动的元素可被放置到何处，该事件需要阻止元素不可被放置到其他元素的默认属性，被拖动的元素才能够放到画布上；

第二步，给画布定义drop事件，该事件在放置元素时触发；该事件触发后，一方面为了使元素能被放置到理想的位置，需要根据当前鼠标的offsetX和offsetY计算组件放置的位置，然后通过组件的top和left属性来定位位置；另一方面需要在全局变量中获取到当前被拖动组件，根据其渲染函数进行渲染，组件就被放到画布的指定位置；

步骤三，调整拖放过来的组件的位置和大小；

步骤四，生成代码并支持二次开发；

步骤五，根据页面布局需求，重复步骤二至步骤四的方法，便可完成单页面的开发。

4.如权利要求3所述的基于Vue.js的可视化开发工具的使用方法，其特征在于，步骤二中，用户选择复合组件时，复合组件通过可视化的方式拖动到当前编辑的单页面中，实现可视化组件化开发，具体包括以下步骤：

步骤201，添加锚点：

在当前编辑的单页面中中画布的制定位置添加锚点，对锚点设置drop事件和dropover事件，保证锚点能够放置复合组件；

步骤202，指定容器宽高：

指定锚点所在的用于放置复合组件的容器的宽高；

步骤203，浏览复合组件并拖放其至容器，并生成代码；

拖动复合组件将其放置到容器中时，根据映射关系找到真实组件，将真实组件挂载到该容器中；根据容器位置在当前编辑的单页面中生成对应的import代码以及组件标签代码；

步骤204，判断该复合组件是否需要与其它页面进行通信：

判断在当前编辑的单页面使用的复合组件是否与其它页面有相关联的数据交互行为；若有，则可视化定义事件，通过全局时间总线通信方式实现交互；若无，则在当前编辑的单页面对复合组件进行数据配置，使复合组件在当前编辑的单页面中实现数据响应；

步骤205，若需要选择多个复合组件，则需要重复步骤203和步骤204，最终完成单页面开发。

5.如权利要求3所述的基于Vue.js的可视化开发工具的使用方法，其特征在于，步骤四中，生成代码并支持二次开发的具体过程包括以下步骤：

步骤401，提供一块无色透明的图形容器区域作为画布，用于绘制图形，并且可以控制每一像素；

步骤402，将封装好的组件元素通过拖放的方式，通过位置的计算可自由布局在画布上。可视化编辑页面的同时，可生成Vue结构的前端代码；

步骤403，工程代码可用该云平台集成的编辑器打开，符合代码规范，关键词高亮，并且支持在线二次编辑。

Images