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

权利要求书

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中，方便实时监控并管理工程；通过定时器轮询线上工程的运行端口，判断该进程是否健康，对异常工程及时进行修复；同时支持开发者手动设置工程的运行状态，包括对项目的上线和下线。