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

权利要求书

1.一种基于VUE与可视化图形操作的页面生成方法，其特征是，包括：

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

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

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

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

2.根据权利要求1所述的基于VUE与可视化图形操作的页面生成方法，其特征是，所述配置信息包括VUE组件配置信息以及页面元素配置信息，所述VUE组件配置信息包括：VUE组件名、VUE组件ID、变量名、函数名、生命周期、数据操作，所述页面元素配置信息包括页面元素节点属性、节点CSS样式、与VUE界面绑定的事件。

3.根据权利要求1所述的基于VUE与可视化图形操作的页面生成方法，其特征是，根据配置参数信息生成组件关系树，所述组件关系树用于记录多个VUE组件之间应用关系包括：

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

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

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

4.根据权利要求3所述的基于VUE与可视化图形操作的页面生成方法，其特征是，根据可视化数据源生成组件关系树具体是：根据可视化数据源中的VUE组件的ID生成组件关系树。

5.根据权利要求4所述的基于VUE与可视化图形操作的页面生成方法，其特征是，所述组件关系树中仅有一个根组件，剩余VUE组件为子组件，根组件支持引用子组件，子组件之间支持相互引用。

6.根据权利要求1-5任一所述的基于VUE与可视化图形操作的页面生成方法，其特征是，所述组件关系树支持实时更新。

7.根据权利要求1所述的基于VUE与可视化图形操作的页面生成方法，其特征是，根据组件关系树自上而下逐层获取各个VUE组件的VUE组件代码之前，还包括：

根据组件关系树从上往下逐层读取存储的配置参数信息以及对应的VUE组件代码，并将配置参数信息以及对应的VUE组件代码在可视化图形操作页面进行展示。

8.一种基于VUE与可视化图形操作的页面生成装置，其特征是，基于权利要求1-7任一所述的基于VUE与可视化图形操作的页面生成方法基础上实现的，包括：

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

组件解析模块，接收可视化操作页面模块传递的配置参数信息，并根据配置参数信息，解析生成对应的VUE组件代码；

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

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

9.根据权利要求8所述的基于VUE与可视化图形操作的页面生成装置，其特征是，还包括：

组件读取模块，根据组件关系树从上往下逐层读取存储的配置参数信息以及对应的VUE组件代码，并将配置参数信息以及对应的VUE组件代码在可视化图形操作页面进行展示。