[发明专利]一种基于Vue的组件可视化系统及方法

说明书

本发明公开了一种基于Vue的组件可视化系统及方法，该系统包括：组件库，组件库包括若干自描述组件，自描述组件均自带元数据，元数据为基于Vue实现的统一数据可读模型；组件解析模块，扫描组件库，获取符合自描述的自描述组件，并解析元数据，形成组件列表；可视化操作模块，包括组件预览单元、组件属性单元、组件工作单元，其中，组件预览单元读取组件列表并可视化呈现，组件属性单元基于选中的自描述组件的元数据动态生成组件属性并可视化呈现，组件工作单元用于自描述组件在可视化界面中的操作。本发明基于自描述组件实现组件可视化操作，不仅操作方便，并且不依赖额外配置文件，减少出错可能，提高运行稳定，简化开发、易扩展性、易维护。

技术领域

本发明属于计算机技术领域，尤其涉及一种基于Vue的组件可视化系统及方法。

背景技术

Vue是一套用于构建用户界面的渐进式框架，基于Vue框架可以快速开发前端应用，实际中使用Vue开发了很多前端页面，但是其可操作性、可扩展性、后期维护性等均还存在问题。

在现有技术中，申请号“201811591773.6”，名称为“基于Vue架构的WEB前端通用UI组件库”的专利，以及申请号“201911212440.2”，名称为“一种面向web的页面构建系统”的专利，它们采用的技术中的通用组件均需要通过配置文件进行描述，这就导致需要维护这个配置文件，并且在其他的相关开源项目中都基于此方法。如此，不仅无端增加了维护成本，每当增加一个组件时需要在配置文件中增加相应配置描述，而且描述的配置文件和组件属性如果不一致，会出现以配置描述显示的组件，和预期的实际使用的组件样式或者属性不符等问题，甚至当两者描述的组件名字不同会导致加载组件无法显示的问题。

发明内容

本发明为解决上述技术问题，提供了一种基于Vue的组件可视化系统及方法。

为解决上述问题，本发明的技术方案为：

一种基于Vue的组件可视化系统，包括：

组件库，组件库包括若干自描述组件，每个自描述组件均自带用于描述数据属性的元数据，元数据为基于Vue实现的统一数据可读模型；

组件解析模块，用于扫描组件库，获取符合自描述的自描述组件，并解析自描述组件的元数据，形成组件列表；

可视化操作模块，包括组件预览单元、组件属性单元、组件工作单元，其中，组件预览单元用于读取组件列表并在可视化界面中呈现，组件属性单元用于基于选中的自描述组件的元数据动态生成组件属性并在可视化界面中呈现，组件工作单元用于自描述组件在可视化界面中的操作。

在其中一个实施例中，解析之后的元数据包括基础数据和/或专有数据；其中，

基础数据设定有默认值，组件解析模块用于自动加载基础数据设定的默认值，获取自描述组件的数据信息；

专有数据约定有数据源，组件解析模块用于自动加载专有数据约定的数据源，获取自描述组件的数据信息。

在其中一个实施例中，组件解析模块还用于基于专有数据约定的数据源的内容更新，实时动态更新组件列表中对应自描述组件的数据信息。

在其中一个实施例中，还包括：导出模块，用于将组件工作单元中设计的页面以自描述组件为单位组装成JSON文件导出。

在其中一个实施例中，自描述组件包括基础组件、流程图组件、活动图组件、图表组件。

在其中一个实施例中，元数据包括名称、标题、图标、默认样式、组件类型、专有属性，其中，专有属性为自描述组件的表征，用于提供图片预览与地址属性或文字输入属性或图例数据输入属性。

在其中一个实施例中，组件解析模块还用于根据组件类型对组件列表内的自描述组件分类存放。