一种基于VUE的插件式开发系统及方法与流程

一种基于vue的插件式开发系统及方法
技术领域
1.本发明属于网络信息技术领域，尤其涉及一种基于vue的插件式开发系统及方法。


背景技术：

2.随着各行各业的信息化转型，需要快速构建面向各行各业的标准化应用平台，以此产生了对软件的标准化、领域化、重用性、可扩展性等一系列的要求，如何制定标准化模板，从而使得业务软件有更好的自适应性、可重用性和可扩展性，这个问题引起了越来越多学者和工程师的关注。
3.前端开发领域目前在标准化模板构建上已有一定的探索：小颗粒度上，有ui组件库提供样式标准，如element-ui、material ui、antdesign、tailwind等，但其封装粒度较小，只对一个小的功能组件进行封装；大层次上，有微前端架构面向垂直划分系统，但每个微应用相对独立、状态互相隔离。综上所述，缺少一种中间层级的前端模块化开发方案来提高软件的可拓展性，使软件更易于开发和维护。
4.专利文献cn115480801a公开了一种基于vue框架的多项目开发部署运行方法和系统，该方法采用框架公共项目和各个项目有独立的git仓库，由各个项目组独立开发；各个项目依赖的共性化组件版本统一，都由框架公共项目决定，当需要升级时只需升级框架公共项目的文件即可，业务项目无需升级；各个项目依赖的个性化组件互不影响且版本各异，都打包在各个项目的文件里；各个项目之间的代码无耦合；发版风险低，各个项目的发版计划互不影响；各个项目更新时，只需替换框架biz下对应的项目打包文件即可。该方法通过已注册插件进行业务系统的构建，从而降低发版风险，但是该方法并未考虑各个代码之间的耦合问题，即存在各个插件代码之间适配性问题。
5.专利文献cn114217798a公开了一种数据库表单界面的代码生成方法和装置，该方法包括基于vba插件或者节点包管理器导入数据库表单信息，数据库表单信息为用于生成数据库表单界面的代码的数据库表单的结构内容，根据数据库表单信息生成查询区代码、查询结果区代码、对话框代码、后台查询接口代码、以及辅助功能代码，创建vue文件，并将查询区代码、查询结果区代码、对话框代码、后台查询接口代码、以及辅助功能代码添加至vue文件中，基于vue文件拼接生成数据库表单界面的代码，数据库表单界面的代码用于生成并输出数据库表单的界面。该方法需要预构建vue文件，无法实现代码的个性化生成和自适应构建。


技术实现要素：

6.为了解决上述问题，本发明提供了一种基于vue的插件式开发系统，该系统可以解决现前端开发技术中因缺少标准化、模板化的业务插件标准，导致代码耦合度过高和开发周期长过长的问题。
7.一种基于vue的插件式开发系统，包括内核层和模块层；
8.所述内核层基于vue的生态圈构建，包括多个用于管理业务插件的业务插件接口；
9.所述模块层用于根据输入的业务类型，提供满足需求的业务插件组；
10.所述内核层通过业务插件接口与业务插件进行配置，实现内核层的生命周期管理，插件配置以及数据通信；
11.所述生命周期管理：管理业务插件的调度工作；
12.所述插件配置：对业务插件进行个性化生成和自适应构建；
13.所述数据通信：通过vuex数据仓库共享业务插件的信息。
14.本发明采用插件化的思想来构建业务插件，每个插件包含相应的业务所需的界面样式信息和函数工具，并暴露接口供内核层对相应插件进行挂载与卸载、实现个性化生成和自适应构建、插件之间数据通信。
15.优选的，所述内核层的业务插件接口与业务插件之间采用vue的单向数据流进行数据传递，从而实现业务插件的个性化生成和自适应构建。
16.具体的，所述业务插件接口包括自定义样式调整接口和动态函数匹配接口。
17.具体的，所述模块层带有预构建的业务插件库，所述业务插件库包括业务插件的默认配置文件、用于身份识别的唯一键名以及代码信息，所述默认配置文件包括业务插件样式信息和业务插件函数参数。
18.优选的，所述业务插件库中的业务插件内置用于与其他业务插件互相嵌套的slot插槽标签，从而实现业务插件自身功能的拓展。
19.优选的，所述业务插件具有在挂载后卸载前可被访问的交互接口，通过所述交互接口与vuex数据仓库形成双向绑定，从而实现业务插件之间的数据通信与功能协同。
20.优选的，所述vuex数据仓库中的数据采用commit函数进行状态同步，并通过mixin方法将同步后的数据注入不同业务插件代码中，所述数据包括业务插件状态信息的键值和状态信息的具体内容值，通过数据统一化从而加快系统开发的速度。
21.优选的，所述管理业务插件的调度工作采用v-is方法和vue的路由懒加载进行管理，所述调度工作包括业务插件的挂载，卸载和热插拔。
22.具体的，所述调度工作的具体过程：通过v-for指令对当前页面业务插件列表进行遍历并获取业务插件唯一性的name_id键名，然后通过v-is方法挂载相应的业务插件，再基于vue的路由懒加载对所有业务插件的挂载或卸载动作进行管理。
23.优选的，所述业务插件组中的所有业务插件代码均通过eslint进行代码格式的统一，从而保证所有业务插件可以自由组合使用。
24.本发明还提供了一种基于vue的插件式开发方法，通过上述的基于vue的插件式开发系统实现，所述插件式开发方法包括：
25.步骤1、根据业务功能划分编写获得对应的业务插件，并将包含所述业务插件的相关样式信息、函数工具以及代码进行封装，获得业务插件库；
26.步骤2、根据所在应用平台和标准接口，在所述业务插件库内进行筛选，获得符合业务需求的业务插件组；
27.步骤3、加载步骤2获得的业务插件组相关配置，实现个性化生成与自适应构建；
28.步骤4、所述业务插件组挂载后卸载前，通过vuex数据仓库进行数据互通，完成用户的交互操作和业务需求。
29.与现有技术相比，本发明的有益效果：
30.本发明利用插件化的思想，统一业务插件的挂载卸载流程，实现业务插件个性化生成和自适应构建，打造统一的数据仓库支持数据通信，最终提高了项目的开发效率。
附图说明
31.图1为本实施例提供的传统前端模块化开发方案的示意图；
32.图2为本实施例提供的一种基于vue的插件式开发系统架构图；
具体实施方式
33.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。
34.如图1所示，目前常用的模块化前端开发方法包括：第三方ui组件库，如element-ui、material ui、antdesign、tailwind等；微前端，如single-spa、qiankun等。但以上所述前端模块化开发方法如下技术问题：虽有第三方ui组件库提供小颗粒度上的样式标准及微前端架构提供垂直划分的业务系统，但缺少依据业务需求点对界面样式和函数方法进行封装的业务功能插件，即缺少一种中间层级的前端模块化开发方案。
35.如图2所示，一种基于vue的插件式开发系统，包括作为服务中心的内核层与提供业务插件的模块层。
36.内核层包含以下功能：
37.a、在生命周期上，管理业务插件的调度，即挂载、卸载、插件热拔插。
38.b、在插件配置上，对业务插件进行适应化和自定义调整。
39.c、在数据通信上，通过数据仓库共享业务插件信息。
40.其中，内核层在插件调度上约定了业务插件的文件格式，该文件格式包括业务插件文件目录、业务插件入口文件名格式、业务插件文件引用规则，其中，文件目录位置相近或为简单的并列关系，同一插件的样式规则、函数方法应和该插件处于同一层级的文件目录之下。
41.在本实施例中，内核层通过webpack筛选相应的文件名和文件目录位置从而对业务插件进行全局注册，具体操作为通过require.context函数注入匹配规则，包括：检索的文件目录、是否检索子文件夹、匹配文件的正则表达式，并通过vue.component函数注入插件名称和插件代码，对筛选出的业务插件进行全局注册。
42.对于新的业务插件，其具体注册过程如下：
43.步骤1-1、核验新增业务插件暴露给内核层的接口参数是否符合内核层的规定；
44.步骤1-2、核验新增业务插件是否对其暴露的参数都在业务插件代码中预留接口；
45.步骤1-3、对新增业务插件代码通过eslint进行代码格式，并对无法自动转化的业务插件代码进行手动修改；
46.步骤1-4、通过上述步骤后，对最终的业务插件进行注册。
47.对于每个业务插件，所述业务插件名称都为唯一的name_id键名，在加载页面时，内核层获取业务插件键名、挂载相应的业务插件，并在不需要的时候对相应的业务插件进行卸载。
48.业务插件的调度工作的具体过程：通过v-for指令对当前页面业务插件列表进行遍历并获取业务插件唯一性的name_id键名，然后通过v-is方法挂载相应的业务插件，再基于vue的路由懒加载对所有业务插件的挂载或卸载动作进行管理。
49.内核层包含多个业务插件接口，可以实现业务插件的自定义样式效果。具体实现方法为，在上述业务插件列表数据中同时存入业务插件的样式信息，其样式信息具有默认值，当样式信息为空、不存在或不符合内核层所约定样式规范时，业务插件会先读取其默认样式；当样式信息存在且符合内核层所约定样式规范时，会通过vue的单向数据流传入业务插件，业务插件获取相应的值并进行默认值的替换。
50.所约定的样式规范包括：数字型(文字大小，页边距，插件元素大小，位置关系等)、字符串型(文字内容)、强约束字符串类型(字体、颜色、图片地址)。
51.内核层实现插件之间的数据通信，内核层在页面开始挂载时候建立vuex数据仓库。该数据仓库是一个容器，其可以储存每个业务插件的状态；所述vuex数据仓库实现了内核层与不同业务插件之间的双向数据绑定，即vuex所储存的业务插件的状态是响应式的，相应的业务插件所操作的数据与vuex数据仓库中的数据同步更新；所述vuex数据仓库中的数据不能通过改变业务插件中的数据直接改变，需要显示地提交commit进行变更，从而使得相应业务插件中的数据同步变化。以此实现不同插件之间的数据通信机制，通过统一的vuex数据仓库同步数据与状态。
52.模块层提供按业务需求点划分的插件模块，简称为业务插件，其具有插件的特性，依据约定的接口自定义生成，并通过插件的挂载与卸载可以动态地插入系统之中。
53.对于插件的挂载与卸载，由模块层的业务插件暴露唯一性的name_id键名进行控制。
54.对于插件的挂载，为了避免挂载时间过长，每个业务插件配置懒加载相关函数，当读取到相应业务插件时开始进行该业务插件的数据读取与页面渲染，在插件未被挂载或者被卸载时，只对外暴露其name_id键名。
55.对于插件的卸载，在业务插件被卸载时，对该插件正在运行的函数进行清理，包括：定时器函数、跨域请求函数。
56.模块层带有预构建的业务插件库，该业务插件库包括业务插件的默认配置文件、用于身份识别的唯一键名以及代码信息，其中默认配置文件包括业务插件样式信息和业务插件函数参数。
57.默认配置文件以json格式文件约定，json文件包含当前应用系统的基础信息，并以key-value的形式存储对应字段名和对应字段值。
58.根据输入的业务类型，从业务插件库中筛选出业务插件组，对于已有业务插件，需要对插件配置文件进行核验，其具体过程如下：
59.步骤2-1、判断是否传入上述参数，如参数为空，则读取默认参数；如参数存在则判断参数是否为正确的json格式，若json格式不正确则返回错误提示，若正确则进行下一步。
60.步骤2-2、在参数存在且为正确json格式时，通过pages字段sharedcomponents属性读取共享业务组件列表，通过pages字段sharedcomponents属性读取共享业务组件列表(componentlist字段)，通过pagecomponents字段读取不同页面业务组件列表(componentlist字段)。
61.步骤2-3、核验业务组件列表是否为数组格式且所含业务组件均已通过内核层函数进行注册，若未注册则返回错误提示，若均已注册则进行下一步。
62.步骤2-4、核验业务组件属性信息，若不存在则加载默认信息，若存在但不符合内核层所指定的规范或在业务插件中找不到对应的信息接口则返回错误信息，若存在且符合内核层所约定的样式和函数信息，则在构建业务组件时进行替换与加载。
63.除了为内核层提供符合要求的业务插件，模块层的业务插件还内置vue的slot插槽标签，实现业务插件之间的相互嵌套。嵌套的子插件可使用父插件中的slot插槽标签，并进行替换。除此之外，每个层级的插件在编译上仍然保持相对独立性，即父级业务插件的内容都是在父级作用域中完成编译，而子级业务插件的编译也都在在子集作用域中进行完成的。
64.在业务插件在首次挂载时，接受内核层传递进来的参数信息，并动态地替代业务插件内置的样式信息文件和函数方法文件，从而实现业务插件的个性化生成和自适应构建。具体实现方法为，建立业务插件的属性信息对象，并输入进内核层的vuex数据仓库，在页面被挂载时通过单向数据流传输导入相应业务插件，并且业务插件内部设置有相关属性的默认值，业务插件会对vuex数据仓库中的样式信息进行判断，包括样式信息是否存在、样式信息格式的正确性，当样式信息不存在或者格式不匹配时加载原先内设的默认值。并且通过建立通用的样式转换函数对复杂的样式进行数据处理，包括：对元素进行遮罩显示、是否自适应父元素大小。
65.业务插件具有在被挂载时可被访问的接口，并于其内部数据形成双向绑定，实时同步内核层的vuex数据仓库中的信息，从而实现业务插件之间的数据通信与功能协同。
66.对于vuex数据仓库的数据修改，通过commit函数对数据进行状态同步，参数包括业务插件状态信息的键值和状态信息的具体内容值，通过mixin方法将同步后的commit函数注入不同业务插件代码中，从而实现快速开发。
67.本实施例还提供了一种插件式开发方法，该方法通过上述实施例提出的基于vue的插件式开发系统实现，该方法包括：
68.步骤1、根据业务功能划分编写获得对应的业务插件，并将包含所述业务插件的相关样式信息、函数工具以及代码进行封装，获得业务插件库；
69.步骤2、根据所在应用平台和标准接口，在所述业务插件库内进行筛选，获得符合业务需求的业务插件组；
70.步骤3、加载步骤2获得的业务插件组相关配置，实现个性化生成与自适应构建；
71.步骤4、所述业务插件组挂载后卸载前，通过vuex数据仓库进行数据互通，完成用户的交互操作和业务需求。
72.以上所述，仅为本发明的优选实施案例，并非对本发明做任何形式上的限制。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。凡在本发明精神和原则之内所做修改、同等替换等，均应包含在本发明的保护范围之内。

技术特征：
1.一种基于vue的插件式开发系统，其特征在于，包括内核层和模块层；所述内核层基于vue的生态圈构建，包括多个用于管理业务插件的业务插件接口；所述模块层用于根据输入的业务类型，提供满足需求的业务插件组；所述内核层通过业务插件接口与业务插件组进行配置，实现内核层的生命周期管理、插件配置以及数据通信；所述生命周期管理：管理业务插件的调度工作；所述插件配置：对业务插件进行个性化生成和自适应构建；所述数据通信：通过vuex数据仓库共享业务插件的信息。2.根据权利要求1所述的基于vue的插件式开发系统，其特征在于，所述内核层的业务插件接口与业务插件之间采用vue的单向数据流进行数据传递。3.根据权利要求1或2所述的基于vue的插件式开发系统，其特征在于，所述业务插件接口包括自定义样式调整接口和动态函数匹配接口。4.根据权利要求1所述的基于vue的插件式开发系统，其特征在于，所述模块层带有预构建的业务插件库，所述业务插件库包括业务插件的默认配置文件、用于身份识别的唯一键名以及代码信息，所述默认配置文件包括业务插件样式信息和业务插件函数参数。5.根据权利要求4所述的基于vue的插件式开发系统，其特征在于，所述业务插件库中的业务插件内置用于与其他业务插件互相嵌套的slot插槽标签。6.根据权利要求4所述的基于vue的插件式开发系统，其特征在于，所述业务插件具有在挂载后卸载前可被访问的交互接口，通过所述交互接口与vuex数据仓库形成双向绑定。7.根据权利要求1或4所述的基于vue的插件式开发系统，其特征在于，所述vuex数据仓库中的数据采用commit函数进行状态同步，并通过mixin方法将同步后的数据注入不同业务插件代码中，所述数据包括业务插件状态信息的键值和状态信息的具体内容值。8.根据权利要求1所述的基于vue的插件式开发系统，其特征在于，所述管理业务插件的调度工作采用v-is方法和vue的路由懒加载进行管理，所述调度工作包括业务插件的挂载，卸载和热插拔。9.根据权利要求1所述的基于vue的插件式开发系统，其特征在于，所述业务插件组中的所有业务插件代码均通过eslint进行代码格式的统一。10.一种基于vue的插件式开发方法，通过如权利要求1～9任一项所述的基于vue的插件式开发系统实现，其特征在于，所述插件式开发方法包括：步骤1、根据业务功能划分编写获得对应的业务插件，并将包含所述业务插件的相关样式信息、函数工具以及代码进行封装，获得业务插件库；步骤2、根据所在应用平台和标准接口，在所述业务插件库内进行筛选，获得符合业务需求的业务插件组；步骤3、加载步骤2获得的业务插件组相关配置，实现个性化生成与自适应构建；步骤4、所述业务插件组挂载后卸载前，通过vuex数据仓库进行数据互通，完成用户的交互操作和业务需求。

技术总结
本发明公开了一种基于VUE的插件式开发系统，包括内核层和模块层；所述内核层基于VUE的生态圈构建，包括多个用于管理业务插件的业务插件接口；所述模块层用于根据输入的业务类型，提供满足需求的业务插件组；所述内核层通过业务插件接口与业务插件组进行配置，实现内核层的生命周期管理、插件配置以及数据通信；所述生命周期管理：管理业务插件的调度工作；所述插件配置：对业务插件进行个性化生成和自适应构建；所述数据通信：通过VUEX数据仓库共享业务插件的信息。本发明还提供了一种插件式开发方法。本发明提出的系统可以解决现前端开发技术中因缺少标准化、模板化的业务插件标准，导致代码耦合度过高和开发周期长过长的问题。题。题。


技术研发人员：江宇薇
受保护的技术使用者：之江实验室
技术研发日：2023.01.18
技术公布日：2023/7/12