[发明专利]vue组件嵌入的实现方法、系统、终端及存储介质

说明书

本发明实施例公开了一种vue组件嵌入的实现方法、系统、终端及存储介质，所述方法包括：确定需要嵌入的vue组件类型；当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。本方法使得开发人员在不需要大面积修改代码框架的基础上，可以实现前后端分离，同时在页面上实现高级页面功能，并更易于代码的维护。

技术领域

本发明涉及计算机编程领域，尤其涉及一种vue组件嵌入的实现方法、系统、终端及存储介质。

背景技术

随着互联网技术的发展，对于项目的开发有了更高的要求，前后端分离开发是一种大的趋势，即专业的开发人员负责各自专业的领域。

但是，由于项目的更迭周期普遍较长，很多企业没有充足的时间和精力来对项目进行破釜沉舟般的更新，而过去的代码多是使用后台模板配合JAVASCRIPT进行开发，随着项目的推进，如果没有前端人员的介入，代码就会变得愈加沉重，对于项目的后续推进和维护都会造成极大的问题。而前端直接介入不使用任何优秀的框架进行管理的话，对于代码质量的把控以及后期项目的迭代也会造成不小的影响。

发明内容

有鉴于此，本申请提供一种vue组件嵌入的实现方法，包括：

确定需要嵌入的vue组件类型；

当所述vue组件为工程式组件时，新建空白页面，将所述vue组件的实例添加到后端资源文件目录下，以及将所述空白页面通过所述实例所在目录的地址与所述vue组件关联，所述空白页面用于在前端显示所述vue组件的实例。

进一步的，所述将所述空白页面通过所述实例所在目录的地址与所述vue组件关联包括：

在所述空白页面中添加iframe标签，并为所述iframe标签添加唯一的第一标识，将所述第一标识与所述vue组件绑定；

为所述iframe标签添加地址属性以指向所述实例所在目录的地址，使得所述空白页面用于在前端显示所述vue组件的实例。

进一步的，还包括：

当所述vue组件为模块式组件时，在所需要嵌入的前端页面文件中创建唯一的第二标识，并将所述第二标识与所述vue组件的对象绑定，将所述第二标识插入所述前端页面文件中的目标模块中。

进一步的，所述第二标识与所述vue组件的对象绑定包括：

通过脚本语言将所述唯一标识与所述vue组件的对象绑定，并将所述对象进行实例化。

进一步的，所述vue组件的对象的实例化过程，包括：

确定所述第二标识所需插入的模块，根据所述模块的功能声明所述需要的变量；

调用对应的函数功能并根据所述变量，执行所述模块的相关功能。

进一步的，所述将所述vue组件的实例添加到指定目录下包括：

将所述vue组件经过编译后得到的静态资源添加到后台框架的静态资源目录下。

进一步的，所述静态资源包括图片、样式及页面文件。

进一步的，本申请还提供一种vue组件嵌入的实现系统，包括：前端页面和vue组件，所述vue组件通过如上述实施例中任一所述的vue组件嵌入的实现方法嵌入前端页面中。

进一步的，本申请还提供一种计算机终端，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行如上述实施例中任一所述的vue组件嵌入的实现方法。