CN114461210A

CN114461210A - 基于vue组件化页面开发方法、装置、设备及存储介质

Info

Publication number: CN114461210A
Application number: CN202111625357.5A
Authority: CN
Inventors: 钟超群; 周山明; 杨云鹏; 叶晓青
Original assignee: Shenzhen Kingdom Technology Co ltd
Current assignee: Shenzhen Kingdom Technology Co ltd
Priority date: 2021-12-27
Filing date: 2021-12-27
Publication date: 2022-05-10

Abstract

本发明公开了一种基于VUE组件化页面开发方法、装置、设备及存储介质，属于网页页面开发技术领域，所述方法为：在实际页面开发之前，获取页面开发项目的预设开发需求，根据所述预设开发需求确定并构建得到目标组件；在实际页面开发中使用Vue.js开源框架设计实际页面时，选用符合所述实际页面的所述目标组件，调用所述目标组件中的目标方法，进行组件化页面开发。本发明采用组件化思想来构建组件，并保留VUE的布局方式，快速进行页面布局，结合业务需求实现多种工具库，简化工具库的调用流程，打造统一的标准对外接口，统一编码规范，便于维护管理，最终提高了VUE页面开发的效率。

Description

基于VUE组件化页面开发方法、装置、设备及存储介质

技术领域

本发明涉及网页页面开发领域，尤其涉及一种基于VUE组件化页面开发方法、装置、设备及计算机可读存储介质。

背景技术

随着项目越来越大时，单工程架构的业务模块间没有明确的划分，模块之前的耦合度大，后期维护成本较高，往往修改一处可能会影响别的耦合模块，出现问题也比较难定位。同时重复工作代码单元的可复用性低，即便复用也是代码级的拷贝复用，复用后再修改也需要多处同步更新，不方便同一代码的后期统一升级维护。

发明内容

本发明的主要目的在于提供一种基于VUE组件化页面开发方法，旨在解决现有技术中VUE页面开发效率低的技术问题。

为实现上述目的，本发明提供一种基于VUE组件化页面开发方法，所述基于VUE组件化页面开发方法包括：

在实际页面开发之前，获取页面开发项目的预设开发需求，根据所述预设开发需求确定并构建得到目标组件；

在实际页面开发中使用Vue.js开源框架设计实际页面时，选用符合所述实际页面的所述目标组件，调用所述目标组件中的目标方法，进行组件化页面开发。

可选地，所述根据所述预设开发需求确定并构建得到目标组件的步骤，包括：

根据所述预设开发需求确定所述目标组件所需的待重写方法和重写所述待重写方法所需的需求参数；

基于所述需求参数，对所述待重写方法进行重写得到目标方法，以一个或多个所述目标方法构建得到所述目标组件。

可选地，所述基于VUE组件化页面开发方法，还包括：

在实际页面开发之前，若所述预设开发需求中存在对已有的第一目标组件的引用，则在当前的第二目标组件中嵌套所述第一目标组件。

可选地，所述基于VUE组件化页面开发方法，还包括：

在实际页面开发中使用Vue.js开源框架设计实际页面时，若接收到对所述第一目标组件的修改指令，则在对所述第一目标组件完成修改后，对所述第一目标组件的引用处的所述第二目标组件实现同步修改。

可选地，在所述根据所述预设开发需求确定并构建得到目标组件之后的步骤，还包括：

在接收到发布所述目标组件的指令后，使用包管理器NPM发布所述目标组件；

在实际页面开发中使用Vue.js开源框架设计实际页面时，使用包管理器NPM安装所述目标组件。

可选地，在所述选用符合所述实际页面的所述目标组件之后的步骤，还包括：

通过在所述目标组件的DOM元素的options属性中配置所述目标方法中的组件参数，或者在初始化方法中传入所述目标方法中的所述组件参数。

可选地，所述基于VUE组件化页面开发方法还包括：

若通过在所述目标组件的DOM元素的options属性中配置所述目标方法中的组件参数，则判断所述组件参数是否是回调函数；

若所述组件参数是回调函数，则通过在VUE实例中获取得到的指定预设变量配置所述回调函数。

此外，为实现上述目的，本发明还提供一种基于VUE组件化页面开发装置，所述基于VUE组件化页面开发装置包括：

构建模块，用于在实际页面开发之前，获取页面开发项目的预设开发需求，根据所述预设开发需求确定并构建得到目标组件；

开发模块，用于在实际页面开发中使用Vue.js开源框架设计实际页面时，选用符合所述实际页面的所述目标组件，调用所述目标组件中的目标方法，进行组件化页面开发。

此外，为实现上述目的，本发明还提供一种基于VUE组件化页面开发设备，所述基于VUE组件化页面开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序被所述处理器执行时实现如上述的基于VUE组件化页面开发方法的步骤。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序被处理器执行时实现如上所述的基于VUE组件化页面开发方法的步骤。

本发明实施例提出的一种基于VUE组件化页面开发方法、设备及计算机可读存储介质，在实际页面开发之前，获取页面开发项目的预设开发需求，根据所述预设开发需求确定并构建得到目标组件；在实际页面开发中使用Vue.js开源框架设计实际页面时，选用符合所述实际页面的所述目标组件，调用所述目标组件中的目标方法，进行组件化页面开发。

在本实施例中，采用组件化思想来构建组件，一个组件就是一两句HTML的标签，使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来，很大程度减少前台编码的出错率；保留了VUE的布局方式，从而快速进行页面布局。对开发者前台技术要求也非常低，只需要了解VUE使用语法即可，从而把更多精力放在业务功能的实现上，极大地提高开发效率。而且，结合业务需求的多样化实现了多种工具库，同时也简化了工具库的调用流程，只需一次安装，随处即可使用，以满足日常不同场景下的业务开发需求。最后，为打造统一的标准的对外接口，在开发期间对每个组件接口设计采用统一风格的API，强化了业务开发人员的调用习惯，形成统一风格的编码规范。同时接口内部的开发风格也形成统一，便于维护管理。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的运行设备的结构示意图；

图2为本发明一种基于VUE组件化页面开发方法一实施例的流程示意图；

图3为本发明一种基于VUE组件化页面开发方法一实施例的技术架构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的运行设备的结构示意图。

如图1所示，该运行设备可以包括：处理器1001，例如中央处理器(CentralProcessing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对运行设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种存储介质的存储器1005中可以包括操作***、数据存储模块、网络通信模块、用户接口模块以及基于VUE组件化页面开发程序。

在图1所示的运行设备中，网络接口1004主要用于与其他设备进行数据通信；用户接口1003主要用于与用户进行数据交互；本发明运行设备中的处理器1001、存储器1005可以设置在运行设备中，所述运行设备通过处理器1001调用存储器1005中存储的基于VUE组件化页面开发程序，并执行以下操作：

进一步地，处理器1001可以调用存储器1005中存储的基于VUE组件化页面开发程序，还执行以下操作：

所述根据所述预设开发需求确定并构建得到目标组件的步骤，包括：

所述基于VUE组件化页面开发方法，还包括：

在所述根据所述预设开发需求确定并构建得到目标组件之后的步骤，还包括：

在所述选用符合所述实际页面的所述目标组件之后的步骤，还包括：

所述基于VUE组件化页面开发方法还包括：

本发明实施例提供了一种基于VUE组件化页面开发方法，参照图2，图2为本发明一种基于VUE组件化页面开发方法第一实施例的流程示意图。

本实施例中，所述基于VUE组件化页面开发方法包括：

步骤S10：在实际页面开发之前，获取页面开发项目的预设开发需求，根据所述预设开发需求确定并构建得到目标组件。

在本实施例中，在实际的网页页面开发之前，获取页面开发项目的预设开发需求，包括需要用到的页面元素、页面布局等，根据该预设预设页面需求确定用到哪些目标组件，并构建这些目标组件，以方便在实际设计时，选用这些目标组件中的一个或多个。

步骤S20：在实际页面开发中使用Vue.js开源框架设计实际页面时，选用符合所述实际页面的所述目标组件，调用所述目标组件中的目标方法，进行组件化页面开发。

在实际页面开发过程，当使用Vue.js开源框架设计实际页面时，选用符合实际页面的页面元素、页面布局等的目标组件，即、在预先实现、构建得到的目标组件中，选用符合当前开发需要、满足当前设计要求的目标组件，调用选用的目标组件中的目标方法，实现设计要求，完成组件化的页面开发。而目标组件的目标方法的调用非常简单，以textinput组件为例，代码如下所示：

that.$refs.CUACCT_CODE.textinput("clear")；//that.$refs.CUACCT_CODE获取组件实例

其中，调用目标组件的目标方法时需传入一个字符串，用来标识需要调用组件的哪一个方法，另外需要注意的是，调用目标组件的目标方法之前必须要确保目标组件已经初始化，否则可能会抛出异常。

在本实施例中，参照图3的技术架构示意图，包括以下基础模块：

1、vue.js，本框架采用能够快速构建数据驱动的web界面的轻量型渐进式JavaScript前端框架，其核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，VUE也完全能够为复杂的单页应用提供驱动，从项目开发角度看，能够提高开发效率，帮助减少不必要的DOM操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心DOM如何渲染。

2、ElementUI，一套为开发者、设计师和产品经理准备的基于VUE 2.0的桌面端组件库。在此组件库基础上，为方便业务开发的需要，对此做了进一步封装成独立的标准化基础UI组件，是前端页面实现了可配置。

3、Loadsh，一个JavaScript的实用工具库，表现一致性、模块化、高性能以及可扩展性强。对于业务开发来说，精简程序逻辑，降低LOC，提升代码的可阅读性。

4、Less，一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。同时也实现了本实施例中前端框架的换肤方案，能够同时支持多套皮肤的打包特性，来应对使用者的实际需求

5、Babel，一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。从很大程度上解决了目前前端浏览器兼容性的问题，使得开发者更专注于业务逻辑开发。

包括以下核心模块：

一、ajax，ajax模块规定了前后端的交互协议，并提供了一些获取后端数据的方法，支持当前流行的promise编程风格。

二、dict，dict是数据字典模块，用于获取后台的数据字典。

三、utils，utils是工具模块，提供了常用的一些常用的工具方法，如JSON序列化和反序列化方法，日期序列化反序列化方法，DES加密解密方法，URL处理方法等。

四，cookies，cookies工具库实现了前端cookies的增删改查相关操作，方便前端调用者使用。

五、consts，consts是常量模块，定义了前端框架的一些常量。

六、IndexedDb，IndexedDb是一种在浏览器端存储数据的方式。既然称之为DB，是因为它丰富了客户端的查询方式，并且因为是本地存储，可以有效的减少网络对页面数据的影响。有了IndexedDb，浏览器可以存储更多的数据，从而丰富了浏览器端的应用类型。同时解决了前端浏览器缓存大小的限制。同时框架实现了对IndexedDb数据库的增删改查的API封装，似的调用者清楚其内部实现，仅需对数据存储进行操作即可。

七、date，date工具库提供了对日期的相关操作，比如日期格式化，日期比较等相关API。

八、queue-utils，排队工具库提供了目前主流的web socket协议排队应用，提供了对排队服务的签入和签出等操作。

九、vue-utils，vue工具库提供了对VUE框架原型方法的扩展，目前支持对父子组件的实例查找功能。

十、fs-enc，fs-enc主要提供可加密和解密两个方法，是一个纯JavaScript写的加密算法类库，可以非常方便地在JavaScript进行MD5、SHA1、SHA2、SHA3、RIPEMD-160哈希散列，进行AES、DES、Rabbit、RC4、Triple DES加解密。

包括以下UI框架：

a、UI组件，本实施例的UI框架是一套基于Element-UI扩展的组件，适用多场景应用开发。该框架目前以实现了多种UI组件，例如address地址组件，message对话框组件，validatebox校验框组件，textinput文本框组件，combobox下拉框组件，table表格组件，form表单组件，telinput电话组件，mobileinput手机输入组件，fieldset布局组件等23种多场景UI组件。

b、echats组件，本实施例的UI框架实现了echats工具库的二次封装，同时支持折线图，柱状图，饼图三种UI的支持，简化了原有API调用流程，对外封装了统一的调用方法，使得开发简单。

c、UI换肤支持，本实施例的UI框架结合web pack打包工具，实现了在原有API不变的情况下，一套UI组件支持了多套皮肤样式。同时针对于使用者来说，无需对改动原组件的API调用逻辑，只需要引入不同皮肤样式即可。

d、统一管理，本实施例的UI框架为了解决框架版本统一管理，更新和发布等问题，引入了目前流行的NPM包管理工具。使用NPM托管框架版本，业务上只需要进行简单install安装命令，便可使用框架所支持的所有内容。

在本实施例中，面对现有的前端UI界面开发，若按照UI设计师进行绘制开发界面时，例如输入框的实现，则需要进行页面结构元素的代码开发，导致在大量的输入框出现的时候，形成多余累计且相同的代码，无法对统一的UI组件进行复用。若对公共功能进行逻辑修改，则需同时修改所有使用了该公共功能的地方。从而对整个项目开发以及后期维护来说是十分艰难的，从而在本实施例中，重新构造了UI框架，抽离了公共部分逻辑，实现组件UI调用方法统一，风格统一，使用统一，开发模式统一等，大大降低了对项目维护的难度，并且提高了整体项目的简洁性，使得开发和维护变得更简单，最终提高了VUE页面开发的效率。另外，在本实施例中，采用组件化思想来构建组件，一个组件就是一两句HTML的标签，使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来，很大程度减少前台编码的出错率；保留了VUE的布局方式，从而快速进行页面布局。对开发者前台技术要求也非常低，只需要了解VUE使用语法即可，从而把更多精力放在业务功能的实现上，极大地提高开发效率。而且，结合业务需求的多样化实现了多种工具库，同时也简化了工具库的调用流程，只需一次安装，随处即可使用，以满足日常不同场景下的业务开发需求。最后，为打造统一的标准的对外接口，在开发期间对每个组件接口设计采用统一风格的API，强化了业务开发人员的调用习惯，形成统一风格的编码规范。同时接口内部的开发风格也形成统一，便于维护管理。

在本实施例中，由步骤S10中，在实际的网页页面开发之前，获取页面开发项目的预设开发需求，包括需要用到的页面元素、页面布局等，根据该预设预设页面需求确定用到哪些目标组件，并构建这些目标组件时，根据预设开发需求在这些确定的目标组件中，确定需要重写的方法和重写需要用到的参数，即确定待重写方法和重写待重写方法所需的需求参数。根据需求参数对一个或多个待重写方法进行重写，便得到了满足预设预设页面需求的目标组件，而其中的目标组件中具体包括的待重写方法的数量和待重写方法的需求参数的数量，需要根据预设开发需求进行实现确定，以尽可能高效率的完成页面开发设计为准。

可选地，所述基于VUE组件化页面开发方法，还包括：

在本实施例中，在实际页面开发之前，允许在目标组件中进行嵌套来满足预设开发需求，如果在预设开发需求中对已有的目标组件进行引用，那么就在引用的目标组件中对该已有的目标组件进行嵌套，从而完成满足预设开发需求的开发。

可选地，所述基于VUE组件化页面开发方法，还包括：

在本实施例中，在实际页面开发过程中，使用Vue.js开源框架设计实际页面，当需要对被引用的目标组件进行修改时，如果修改了被引用的目标组件，那么所有引用了该被引用的目标组件的其他目标组件均会被同步修改，从而不需要再对公共功能进行逻辑修改时，还需同时找到对应方法，修改所有使用了该方法的部分。

在本实施例中的UI框架采用VUE前端框架为基础，所有开发模式需按照VUE前端开发规范要求，其安装要求同VUE安装第三方库步骤一样。在本实施例中的安装命令如下：npminstall szkingdom.zq.kmsp-ui。从而，在构建完成目标组件后，使用包管理器NPM发布所述目标组件，在需要用到目标组件的地方，通过使用包管理器NPM安装不同的目标组件。

在本实施例中，目标组件的组件参数可在目标组件的DOM元素的options属性上配置，如下代码所示：<kui-textinput ref＝"YMT_CODE":options＝"{title:'一码通账号',disabled:true,width:400,val:YMT_CODE,hidden:！YMT_CODE}"/>。或者目标组件初始化也支持VUE页面自动初始化，也可进行手动初始化。其中手动初始化的方式非常简单，只需要在VUE页面当前组件的refs对象上调用对应的组件方法并传入组件参数即可，以fieldset组件为例，组件手工初始化代码如下：

其中，fieldset是扩展到VUE子组件的refs组件方法，初始化组件时传入了两个参数isShowToolbarActive和toolbar，不同组件参数各不相同，目标组件具体可识别的参数请参考docs下的文档或查看组件源代码。

可选地，所述基于VUE组件化页面开发方法还包括：

在本实施例中，对于配置在VUE元素上的组件参数，如果组件参数是一个回调函数，配置时可以指定一个变量，这个变量能够作为一个属性在VUE实例中取到，否则解析器无法识别改参数，如下所示：

<kui-button:ref＝'"BANK_OPER_BTN"+bankKey':options＝"{buttonGroup:[{value:'0',text:'存管变更',icon:'el-icon-edit',handler:()＝>changeBankInfo(bankKey)},{value:'1',text:'删除',icon:'el-icon-delete',handler:()＝>removeBankInfo(bankKey)}].filter(obj＝>{

return bankInfoConf.OLD_EXT_ORG&&obj.value＝＝'0'||(custExtAttr＝＝'0'&&bankInfoConf.MAIN_FLAG！＝＝'1'&&obj.value＝＝'1')})}"/>

其中，在VUE页面中配置了一个kui-button组件，并且配置了一个handler回调函数changeBankInfo，changeBankInfo必须在VUE的对应的methods中定义：method:{changeBankInfo(index){...}}。

此外，本发明实施例还提供一种基于VUE组件化页面开发装置，所述基于VUE组件化页面开发装置包括：

此外，本发明实施例还提供一种基于VUE组件化页面开发设备，所述基于VUE组件化页面开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序被所述处理器执行时实现如上述的基于VUE组件化页面开发方法的步骤。

此外，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序被处理器执行时实现如上所述的基于VUE组件化页面开发方法的步骤。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者***不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者***所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者***中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种基于VUE组件化页面开发方法，其特征在于，所述基于VUE组件化页面开发方法包括以下步骤：

2.如权组利要求1所述的基于VUE组件化页面开发方法，其特征在于，所述根据所述预设开发需求确定并构建得到目标组件的步骤，包括：

3.如权利要求1所述的基于VUE组件化页面开发方法，其特征在于，所述基于VUE组件化页面开发方法，还包括：

4.如权利要求3所述的基于VUE组件化页面开发方法，其特征在于，所述基于VUE组件化页面开发方法，还包括：

5.如权利要求1所述的基于VUE组件化页面开发方法，其特征在于，在所述根据所述预设开发需求确定并构建得到目标组件之后的步骤，还包括：

6.如权利要求1所述的基于VUE组件化页面开发方法，其特征在于，在所述选用符合所述实际页面的所述目标组件之后的步骤，还包括：

7.如权利要求6所述的基于VUE组件化页面开发方法，其特征在于，所述基于VUE组件化页面开发方法还包括：

8.一种基于VUE组件化页面开发装置，其特征在于，所述基于VUE组件化页面开发装置包括：

9.一种基于VUE组件化页面开发设备，其特征在于，所述基于VUE组件化页面开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序配置为实现如权利要求1至7中任一项所述的基于VUE组件化页面开发方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有基于VUE组件化页面开发程序，所述基于VUE组件化页面开发程序被处理器执行时实现如权利要求1至7中任一项所述的基于VUE组件化页面开发方法的步骤。