基于Vue的前端多项目展示方法、系统、设备及存储介质与流程

本发明涉及前端设计领域，具体涉及一种基于vue的前端多项目展示方法、系统、设备及存储介质。

背景技术：

当今市场，用于构建用户界面的渐进式javascript框架的vue框架已成为前端主流框架之一。伴随着越来越多公司的业务深入，产品或者项目的大小及复杂度也在不断地提升。为了适应整体业务需求，往往必须通过多个vue项目实现，并在每个项目下面再根据具体业务划分不同的模块。而多个项目可能需要由多个不同的团队进行维护更新。这些项目可能都会有个性化的业务设计，如何才能让由多个不同团队维护的项目合理地在一起展示出来就成了我们不得不面对的一个主要问题。

现有技术通过iframe标签展示不同的项目。iframe标签是一个原生跳转页面的标签。这个标签允许我们将不同的系统页面通过链接的方式嵌套在一起，并过滤掉嵌套的系统页面中我们不需要展示的内容，以此来达到多个系统的统一化展示。这个方案虽然实现了业务需求，但是随之而来的便是为后续开发及维护工作带来了巨大的挑战。例如：已经加载过的页面缓存问题、其他系统页面的权限控制问题、嵌套的页面所对应的系统是否支持直接跳转具体页面方式的问题、嵌套页面容器及内容样式的调试难度问题等等。这些问题都会使系统因为使用了iframe标签嵌套而变得复杂和混乱。而伴随着系统的不断复杂和混乱，系统的可维护性和可扩展性也在变的越来越差，以至于到最后整个系统到达难以维护甚至重构的程度。

技术实现要素：

为了解决上述技术问题，本发明提出了一种基于vue的前端多项目展示方法、系统、设备及存储介质，实现了子系统项目展示一体化管理调配，增强了项目的易扩展性和可维护性。

为实现上述目的，本发明采用以下技术方案：

一种基于vue的前端多项目展示方法，包括：

主项目下创建项目列表配置文件，所述列表配置文件包含子系统项目的标识和链路地址；

全局注册中心读取项目列表配置文件信息，调用全局路由的子系统项目注册方法，将各个子系统项目注册至全局注册中心，存储子系统项目的数据信息；

展示基座通过全局注册中心获取子系统项目的数据信息，调用子系统项目的渲染函数，渲染展示对应的子系统项目数据信息。

进一步地，所述展示基座通过全局对象获取全局注册中心的子系统项目的数据信息，所述全局对象下挂载全局注册中心。

进一步地，所述全局对象包括浏览器自带的window对象、vue的原型链或vuex状态管理。

进一步地，所述展示基座根据需求创建视图子文件夹，所述视图子文件夹包括菜单展示区域文件夹、用户信息区域文件夹、企业logo区域文件夹和登录区域文件夹的一种或多种。

进一步地，当某个子系统项目数据信息不再需要时，全局注册中心将该子系统项目注销。

本发明还提出了一种基于vue的前端多项目展示系统，包括：

项目配置模块，用于在主项目下创建项目列表配置文件，所述列表配置文件包含子系统项目的标识和链路地址；

全局注册模块，用于根据项目列表配置文件信息调用全局路由的子系统项目注册方法，注册、存储子系统项目的数据信息；

项目展示模块，用于通过全局注册模块获取子系统项目的数据信息，调用子系统项目的渲染函数，渲染展示对应的子系统项目数据信息。

进一步地，所述全局注册模块还用于注销不再需要的子系统项目。

本发明还提出了一种基于vue的前端多项目展示设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上所述基于vue的前端多项目展示方法的步骤。

本发明还提出了一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述基于vue的前端多项目展示方法的步骤。

本发明的有益效果是：

本发明通过提出一种基于vue的前端多项目展示方法、系统、设备及存储介质，通过构建全局注册中心，进行统一的存储、注册、调用和注销管理，并由项目展示基座进行统一调配展示各个子系统项目提供业务页面内容，各司其职，自为一体，易于维护，不用为了统一展示每个项目而去单独地编写展示逻辑，从而增强了项目的灵活性。同时，因为各个项目的完全独立化，从而使得项目整体完全可以根据具体的业务需求轻松增删功能，大大加强了项目的易扩展性。通过统一注册的方式，使得项目变得更加容易管理，降低后期对于多项目统一化展示而增加的维护及二次开发成本。各项目自为一体，真正实现了即插即用的效果。

附图说明

图1是本发明实施例基于vue的前端多项目展示方法流程示意图；

图2是本发明实施例基于vue的前端多项目展示系统结构示意图；

图3是本发明实施例基于vue的前端多项目展示系统功能架构图。

具体实施方式

为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。

如图1所示，本发明实施例公开了一种基于vue的前端多项目展示方法，包括：

主项目下创建项目列表配置文件，所述列表配置文件包含子系统项目的标识和链路地址；

全局注册中心读取项目列表配置文件信息，调用全局路由的子系统项目注册方法，将各个子系统项目注册至全局注册中心，存储子系统项目的数据信息；

展示基座通过全局注册中心获取子系统项目的数据信息，调用子系统项目的渲染函数，渲染展示对应的子系统项目数据信息。

具体地，所述项目列表配置文件创建在主项目静态资源文件夹下，所述全局注册中心和展示基座创建在主项目代码文件中。全局注册中心文件夹下存放进行全局注册的js逻辑文件，该文件内容主要存放子系统项目信息，提供子系统项目的注册、调用和注销功能，以方便对各个子系统项目信息进行存储、注册、调用和注销。所有的子系统项目必须通过全局注册中心进行注册与注销，以此实现子系统项目信息的统一化管理。全局注册中心的注册过程中，通过在静态资源文件夹下创建和维护的项目列表配置文件中的信息请求各个子系统项目的主要信息数据，通过调用全局路由中写好的统一注册方法，将各个子系统项目的数据信息全部注册存储到全局注册中心中。使用数据信息时，通过全局注册中心调用相关的子系统项目数据信息，当某个子系统项目数据信息不再需要时，通过全局注册中心将该子系统项目注销。

为了方便展示基座调用获取子系统项目数据，所述全局注册中心可以挂载在全局对象下，展示基座通过全局对象获取全局注册中心的子系统项目的数据信息，全局对象包括但不限于浏览器自带的window对象、vue的原型链或者vuex状态管理。在需要用到各个子系统项目的信息数据时，我们可以通过全局对象去获取到挂载的全局注册中心，并根据全局注册中心获取到已经注册过的各个子系统项目的信息数据。

所述展示基座在主项目下创建为view视图文件夹，并可根据需求创建不同的视图子文件夹，例如：菜单展示区域、用户信息区域、企业logo区域、登录区域等等。这些文件夹中的文件全部是以.vue结尾的视图文件，用于对统一展示平台的展示风格进行编码构建，该视图文件作为一个空的展示容器，用于调用展示各个子系统项目页面。每一展示区域的数据均通过全局注册中心获取，全局对象可以对数据进一步处理，形成展示区域要求的数据格式。

如图2所示，本发明实施例还公开了一种基于vue的前端多项目展示系统，包括：

项目配置模块，用于在主项目下创建项目列表配置文件，所述列表配置文件包含子系统项目的标识和链路地址；

全局注册模块，用于根据项目列表配置文件信息调用全局路由的子系统项目注册方法，注册、存储子系统项目的数据信息；

项目展示模块，用于通过全局注册模块获取子系统项目的数据信息，调用子系统项目的渲染函数，渲染展示对应的子系统项目数据信息。

所述全局注册模块还用于注销不再需要的子系统项目。

如图3所示，用户访问展示基座统一化展示项目时，通过调用在各个子系统项目下的渲染函数，将对应的页面渲染到已经预先准备好的展示区域的展示容器中。具体地，所述渲染函数被注册到全局注册中心中。当我们展示基座中的菜单区域时，根据点击的菜单数据，可以通过全局注册中心找到对应的子系统项目信息数据。

本发明实施例还公开了一种基于vue的前端多项目展示设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上所述基于vue的前端多项目展示方法的步骤。

本发明实施例还公开了一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述基于vue的前端多项目展示方法的步骤。

上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制。对于所属领域的技术人员来说，在上述说明的基础上还可以做出其它不同形式的修改或变形。这里无需也无法对所有的实施方式予以穷举。在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。