[发明专利]一种基于VUE与可视化图形操作的页面生成方法及装置

说明书

本发明为了现有技术中存在的问题，创新提出了一种基于VUE与可视化图形操作的页面生成方法，改变了前端开发的传统编码方式，而是让用户(即前端研发人员)通过界面上的图形化操作，直接拼装VUE组件，并以表单形式为VUE组件及其内部的各HTML元素配置属性、样式、事件等参数，根据组件关系树自上而下逐层获取各个VUE组件的VUE组件代码，合并优化生成VUE项目代码，本发明还提出了一种基于VUE与可视化图形操作的页面生成装置，有效解决由于现有技术中工具不能应用于VUE项目前端开发、组件开发等的问题，有效的提高了前端开发的效率。

技术领域

本发明涉及页面生成领域，尤其是涉及一种基于VUE与可视化图形操作的页面生成方法及装置。

背景技术

近几年，随着VUE(一套用于构建用户界面的渐进式JAVASCRIPT框架)、HTML5(一种用来开发页面的超文本标记语言)、CSS3(一种用来表现HTML等文件样式的计算机语言)等前端技术的快速发展，各公司争相提升产品的美观程度、用户体验以及功能的丰富程度，对前端开发人才的关注度不断升温。虽有不少人调整技术方向投入到前端行业，但前端技术迭代较快，且涉及知识面相对宽泛，导致学习成本较高，也造成目前前端市场优质研发人才稀缺的现象，严重影响了团队的前端开发效率。随着前后端分离开发模式的提出与盛行，对前端开发效率的提升更加迫切。如何降低前端开发的门槛，进而让每个开发人员都能轻易参与前端开发任务，并准确实现前端需求。

现有的平台解决案例中，如Dreamweaver(集网页制作和管理网站于一身的网页代码编辑器软件)，仅能通过一些现有HTML元素进行组合拼装出一个静态的HTML页面Demo(示例)，以及为其配置简单样式和JAVASCRIPT(一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言)脚本。

但是现有Dreamweaver并不能用于VUE项目的前端开发、组件开发、以及高效的内部数据交互，开发效率也不高。

发明内容

本发明为了解决现有技术中存在的问题，创新提出了一种基于VUE与可视化图形操作的页面生成方法及装置，有效解决由于现有技术中工具不能应用于VUE项目前端开发、组件开发等的问题，有效的提高了前端开发的效率。

本发明第一方面提供了一种基于VUE与可视化图形操作的页面生成方法，包括：

在可视化操作页面进行图形化操作，拼装VUE组件，并进行VUE组件和VUE组件中的页面元素的配置，将配置参数信息传递给组件解析模块；

接收传递的配置参数信息，并根据配置参数信息，解析生成对应的VUE组件代码；

根据配置参数信息生成组件关系树，所述组件关系树用于记录多个VUE组件之间应用关系；

根据组件关系树自上而下逐层获取各个VUE组件的VUE组件代码，合并优化生成VUE项目代码。

可选地，所述配置信息包括VUE组件配置信息以及页面元素配置信息，所述VUE组件配置信息包括：VUE组件名、VUE组件ID、变量名、函数名、生命周期、数据操作，所述页面元素配置信息包括页面元素节点属性、节点CSS样式、与VUE界面绑定的事件。

可选地，根据配置参数信息生成组件关系树，所述组件关系树用于记录多个VUE组件之间应用关系包括：

接收并存储生成的VUE组件代码；

将传递的配置参数信息转换为可视化数据源，并进行存储；

根据可视化数据源生成组件关系树。

进一步地，根据可视化数据源生成组件关系树具体是：根据可视化数据源中的VUE组件的ID生成组件关系树。

进一步地，所述组件关系树中仅有一个根组件，剩余VUE组件为子组件，根组件支持引用子组件，子组件之间支持相互引用。