CN110187878A - 一种页面生成方法和装置 - Google Patents

Abstract

本申请公开了一种页面生成方法和装置，方法包括：在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。本申请实施例解决了骨架屏页面展示中开发负担大的技术问题。

Description

一种页面生成方法和装置

技术领域

本申请涉及计算机技术领域，具体涉及一种页面生成方法和装置。

背景技术

现有技术在前端内容未加载完成时，通常以加载锁屏动画(比如常见的漏斗或者圆形旋转图案)等方式提示用户等待内容加载完成。这种方式用户并不能直观感知到数据的加载过程，体验较差。有一种技术方案是在数据获取或页面加载完成之前，先展现骨架屏，由于骨架屏的样式、布局和真实数据渲染的页面保持一致，这样用户在骨架屏中获取到关注点，并能够预知页面什么地方将要展示文字什么地方展示图片，这样也就能够将关注焦点移到感兴趣的位置。骨架屏(Skeleton Screen)作为传统加载动画的替代，能够使用户在数据完全加载之前感知页面的基本样式，提高了用户体验。

但是，对于开发人员而言，在页面未加载成功之前展示骨架屏的开发负担较大，因为开发人员除了开发原始页面外，还需要再开发一个骨架屏页面。

发明内容

有鉴于此，本申请提供了一种页面生成方法和装置，以解决现有技术中骨架屏页面展示中开发负担大的技术问题。

根据本申请的第一个方面，提供了一种页面生成方法，包括：

在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

根据本申请的第二个方面，提供了一种页面生成装置，包括：

模板获取模块，用于在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

页面生成模块，用于遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

根据本申请的第三个方面，提供了一种电子设备，所述电子设备包括：处理器，以及存储有可在处理器上运行的计算机程序的存储器；其中，所述处理器，用于在执行所述存储器中的计算机程序时执行本申请一个方面所述的方法。

根据本申请的第四个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现本申请一个方面所述的方法。

应用本申请实施例的页面生成技术方案，只需要在前端开发过程中，在打包工具中引入骨架屏加载器，如果打包工具对目标页面的前端代码进行打包，则骨架屏加载器获取目标页面的模板，查找出目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为目标DOM节点配置相应的骨架样式后生成骨架屏页面，从而无需前端开发人员对骨架屏页面进行二次开发，减少了开发人员的工作量，并且减少了对源代码的侵害，方便推广应用。

附图说明

图1是本申请一个实施例的页面生成方法的流程图；

图2是申请一个实施例的骨架屏页面的生成和加载流程示意图；

图3是本申请一个实施例的页面生成装置的框图；

图4是本申请一个实施例的电子设备的结构示意图；

图5是本申请一个实施例的计算机可读存储介质的结构示意图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1是本申请一个实施例的页面生成方法的流程图，参见图1，本实施例的页面生成方法包括下列步骤：

步骤S101，在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

步骤S102，遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

由图1所示可知，本实施例的页面生成方法通过在打包工具对目标页面的前端代码进行打包之前，获取目标页面的模板，遍历模板查找出目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为目标DOM节点配置相应的骨架样式后生成骨架屏页面。从而，能够自动生成骨架屏页面，无需前端开发人员对骨架屏页面进行二次开发，减少了开发人员的工作量。

本申请实施例的页面生成方法属于应用(Application)开发中的前端开发阶段，在前端开发阶段，通常需要借助前端框架比如Vue。Vue是一个渐进式框架，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。对于通过前端框架Vue实现的开发，应用本实施例的方案之后，前端开发人员只需要按照原始页面的开发流程，开发出原始页面，并在打包工具中引用本实施例的骨架屏加载器即可。在原始页面打包部署的过程中骨架屏加载器自动生成出静态的骨架屏页面，并且通过与Vue中脚手架组件合作，利用前端高级异步组件，根据不同加载状态载入不同页面的功能，最终实现骨架屏页面的生成和加载一步操作而无需开发人员再次开发的有益效果。

总的来看，在上述架构下前端页面的开发和加载的主要流程是：

(一)开发人员开发好原始页面；

(二)打包工具(如Webpack)引入骨架屏加载器；

(三)开发人员进行打包部署，骨架屏加载器生成骨架屏静态页面；

(四)脚手架组件通过vue异步加载功能在原始页面的数据尚未完成加载时，选用骨架屏页面优先进行加载，等待原始页面的数据加载完成后再加载原始页面并置入数据。

图2是申请一个实施例的骨架屏页面的生成流程示意图，以下结合图2对本实施例的骨架屏页面的生成过程进行说明。

参见图2，流程开始，首先执行步骤S210，获取页面模板；

本实施例中，通过Vue预加载器获取目标页面的Vue模板。这里的目标页面可以是根据各业务需要开发的原始页面，原始页面与骨架屏页面的区别是两者的样式、布局一致，但是页面内容不同。骨架屏页面中不包括真实数据内容而是使用的占位符，占位符的数据量小所以加载速度较快。

具体的，本实施例中通过Webpack打包工具的vue组件loader——vue loader中的vuepreloader选项，在目标页面被完全解析成js代码前获取到目标页面当前的Vue模板。

步骤S220，模板中是否有自定义组件，是则执行步骤S230，否则执行步骤S260；

由于Vue框架允许引用多个已经写好的自定义组件来一同构建页面，因此在进行骨架屏转换逻辑生成骨架屏前需要将目标页面中引用的自定义组件全部解析替换后才方便进行转换。

基于此，本实施例的步骤S220中判断模板中是否有自定义组件，即判断获取的Vue模板中是否存在自定义组件，如果所述目标页面的Vue模板中存在自定义组件，则执行步骤S230至步骤S250，即，对页面模板的vue文件进行语法树解析，得到当前页面所有使用的源模板文件及对应文件的引用位置，然后将自定义组件的代码替换成自定义组件引用的对应文件当中的模板内容。重复以上步骤，直至页面当前vue模板中已经没有自定义组件而只有基础的HTML(Hyper Text Markup Language，超文本标记语言)DOM(Document ObjectModel，文档对象模型)元素。

这样就得到了完整的页面内容，也即原始页面真正加载完成之后的HTML结构内容。

步骤S230，Vue语法树解析；

这里根据Vue模板文件中自定义组件的引用循环解析Vue模板，直至Vue模板中只有基础DOM元素，没有自定义组件模板

Vue语法树解析的目的是获得源模板文件componentList和引用位置importList。

步骤S240，找出源模板文件；

在本步骤中根据源模板文件componentList和引用位置importList查找源模板文件。

步骤S250，用源模板文件的内容替换自定义组件；

这里是利用上一步骤中的源模板文件中的模板内容替换自定义组件。

由上可知，本实施例中判断模板中是否有自定义组件，如果目标页面的Vue模板中存在自定义组件，则对Vue模板进行解析，具体包括：步骤A，对Vue模板进行语法树解析，得到Vue模板中自定义组件的源模板文件和源模板文件的引用位置；步骤B，根据源模板文件的引用位置查找源模板文件，利用源模板文件中的模板内容替换自定义组件；重复步骤A和步骤B，直至目标页面的Vue模板中没有自定义组件。

步骤S260，依据骨架屏转换逻辑进行处理，生成骨架屏页面；

解析后的Vue模板文件，依据骨架屏的转换逻辑进行转换，除去与真实数据相关的内容，生成可适用的静态骨架屏。

一个实施例中，依据骨架屏转换逻辑进行处理包括：遍历模板，查找出模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为目标DOM节点配置相应的骨架样式。注：这里的骨架样式是指用来模拟页面中的图片和文字的灰色图，灰色图中不包括图片和文字中的内容。

对于模板中的文本本实施例中骨架屏的转换逻辑是：在遍历模板时，查找出非空白的文本节点，将文本节点的内容替换成预设占位符号，并为所述文本节点的父节点添加文字骨架样式。

对于模板中的图片，本实施例的骨架屏的转换逻辑是：遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式，包括：遍历所述模板，查找出图片标签节点，将所述图片标签节点的src属性值替换为预设图片的地址，并为所述图片标签节点配置图片骨架样式，其中，预设图片的颜色为灰色。

对于页面的内联样式中引用图片的情况，本实施例遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式，包括：遍历所述模板，查找出内联样式数据所在的第一节点，将所述第一节点的样式替换为图片骨架样式；其中，所述内联样式数据的样式中包含图片，所述第一节点的类型不包括图片类型；或者，遍历所述模板，查找出存在自定义图片标签属性的第二节点，将所述第二节点的样式替换为图片骨架样式；其中，所述自定义图片标签属性的src属性值为懒加载(lazy-load)图片的地址，所述第二节点的类型不包括图片类型。

针对Vue中常见的v-if、v-for语句中引用图片的情况，本实施例遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式，包括遍历所述模板，找到v-if指令或v-for指令所在的第三节点，保留所述v-if指令中的第一个元素或所述v-for指令中的第一个元素，并对所述第一个元素之后的元素，根据元素类型进行替换处理。

也就是说，本实施例对页面中常见的文字和图片的骨架屏转换逻辑分别如下，

1.文字

遍历模板(template)，找到所有内容非空的NODE_TEXT文本节点，用占位符(占位符比如xxxxxxx)替代文本节点的内容，并为非空文本节点的父节点添加文字骨架样式(注，文字骨架样式是灰色矩形条用于指示对应位置在加载成功后显示的是文字)。由于内容为空的NODE_TEXT文本节点对展示没有影响，所以本实施例中在遍历模板template时可以将为空的NODE_TEXT文本节点从父节点中删除。

2.图片

2.1对于页面中的<img>标签；

遍历模板，查找到图片标签即<img>标签节点，将图片标签节点的src属性值换成预设图片的链接，并添加图片骨架样式，这里的预设图片是颜色为灰色的占位图，注：图片骨架样式是灰色矩形块，用于指示对应位置在加载成功后显示的是图片。

2.2对于页面中的内联样式；

遍历模板，查找到存在内联样式且样式中包含背景图片background-image的任意类型的节点，将该节点的样式替换为图片骨架样式。

2.3对于页面中的懒加载图片插件；

遍历模板，查找到存在懒加载图片指示内容的任意类型节点，将该节点样式替换为图片骨架样式，懒加载lazyload图片插件是对于页面中包括多张图片的情况，只有当图片出现在浏览器的可视区域时再加载该图片，以此提高页面渲染速度节省带宽。懒加载图片插件的实现原理是：将页面里全部或部分img标签的src属性用懒加载图片指示内容data-xx(比如data-real-src)代替，当页面滚动至此图片出现在可视区域时，用js获取该图片的data-xx的值赋给src属性即可。

所以，本实施例中，针对原始页面中存在懒加载图片的情况，获取存在懒加载图片指示内容的任意类型节点，将该节点样式替换为图片骨架样式，以将懒加载图片转换为骨架屏中的占位图。

3.对于v-if、v-for等vue支持的条件、列表循环渲染内容；

Vue中支持条件指令与循环指令，条件指令即v-if，比如：

<h1v-if＝"msg>10">

如果v-if条件不成立，那么Vue不会把标签渲染到页面上。

v-for指令可以绑定数组的数据来渲染一个项目列表(通俗的说就是循环数组)当处理指令时，v-for比v-if具有更高的优先级。

本实施例中遍历模板，找到v-if、v-for之后渲染标签内容，对于v-if条件中的第一个元素(该元素可能为文本或图片)，或v-for循环中的第一个元素进行渲染展示，对于其余元素则根据元素类型按照前述步骤1和步骤2.1中的逻辑进行替换并添加骨架样式样式。

比如，v-if中包括三个元素，第一元素为文本，第二个元素和第三个元素都为图片，那么本实施例中在遍历到找到v-if指令所在的第三节点时，保留v-if指令中的第一个元素，并对第二个元素和第三元素根据图片类型进行替换处理，即，将图片标签节点的src属性值换成预设图片的链接，并添加图片骨架样式。

步骤S270，Vue高级异步组件加载；

本步骤中使用Vue框架的高级异步模板适时加载按需加载页面。比如在生成所述骨架屏页面后该方法还包括：通过Vue异步组件在所述目标页面未成功加载时，加载并展示所述骨架屏页面。也就是说，如果原始页面未完成加载则Vue高级异步组件加载骨架屏页面，如果原始页面完成了加载则Vue高级异步组件原始页面。

流程结束。

至此，本实施例的自动生成骨架屏的方案，首先，支持对所有使用Vue框架开发的前端页面生成骨架屏，无需前端开发人员对骨架屏页面进行二次开发，减少了开发人员的工作量，用户更加直观地提前感知页面的基本样式以及页面在逐渐加载的过程。其次，能够做到对开发人员基本无感开发，基本没有对原代码有二次注入，减少了对源代码的侵害，方便推广。最后，本实施例基于原始页面的模板结构制作骨架屏页面，从而能够完美还原原始页面，满足了需求。

图3是本申请一个实施例的页面生成装置的框图，参见图3，本实施例的页面生成装置300包括：

模板获取模块301，用于在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

页面生成模块302，用于遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

在本申请的一个实施例中，所述页面生成模块302，具体用于遍历所述模板，查找出非空白的文本节点，将文本节点的内容替换成预设占位符号，并为所述文本节点的父节点添加文字骨架样式。

在本申请的一个实施例中，所述页面生成模块302，具体用于遍历所述模板，查找出图片标签节点，将所述图片标签节点的src属性值替换为预设图片的地址，并为所述图片标签节点配置图片骨架样式，其中，预设图片的颜色为灰色。

在本申请的一个实施例中，所述页面生成模块302，具体用于遍历所述模板，查找出内联样式数据所在的第一节点，将所述第一节点的样式替换为图片骨架样式；其中，所述内联样式数据的样式中包含图片，所述第一节点的类型不包括图片类型；或者，遍历所述模板，查找出存在自定义图片标签属性的第二节点，将所述二节点的样式替换为图片骨架样式；其中，所述自定义图片标签属性的src属性值为懒加载图片的地址，所述第二节点的类型不包括图片类型。

在本申请的一个实施例中，所述页面生成模块302，具体用于遍历所述模板，找到v-if条件内容或v-for列表循环内容所在的第三节点，保留所述v-if条件内容中的第一个元素或所述v-for列表循环内容中的第一个内容，并对所述第一个元素之后的元素，根据元素类型进行替换处理。

在本申请的一个实施例中，所述模板获取模块301具体通过Vue预加载器获取所述目标页面的Vue模板；所述装置还包括加载展示模块，用于在生成所述骨架屏页面后通过Vue异步组件在所述目标页面未成功加载时，加载并展示所述骨架屏页面。

图3所示页面生成装置300还包括解析模块，用于如果所述目标页面的Vue模板中存在自定义组件，则对所述Vue模板进行解析，具体包括：步骤A，对所述Vue模板进行语法树解析，得到所述Vue模板中所述自定义组件的源模板文件和所述源模板文件的引用位置；步骤B，根据所述源模板文件的引用位置查找所述源模板文件，利用所述源模板文件中的模板内容替换所述自定义组件；重复所述步骤A和步骤B，直至所述目标页面的Vue模板中没有自定义组件。

需要说明的是，图3所示页面生成装置300中的各模块所执行的各步骤的举例解释说明，与前述方法实施例中的举例解释说明一致，这里不再一一赘述。

需要说明的是：

在此提供的算法和显示不与任何特定计算机、虚拟装置或者其它设备固有相关。各种通用装置也可以与基于在此的示教一起使用。根据上面的描述，构造这类装置所要求的结构是显而易见的。此外，本申请也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本申请的内容，并且上面对特定语言所做的描述是为了披露本申请的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本申请的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本申请的示例性实施例的描述中，本申请的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本申请要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本申请的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本申请的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本申请的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本申请实施例的页面性能测试装置中的一些或者全部部件的一些或者全部功能。本申请还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本申请的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

例如，图4是本申请一个实施例的电子设备的结构示意图。该电子设备400包括：处理器410，以及存储有可在所述处理器410上运行的计算机程序的存储器420。处理器410，用于在执行所述存储器420中的计算机程序时执行本申请中方法的各步骤。存储器420可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器420具有存储用于执行上述方法中的任何方法步骤的计算机程序431的存储空间430。计算机程序431可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为例如图5所述的计算机可读存储介质。

图5是本申请一个实施例的计算机可读存储介质的结构示意图。该计算机可读存储介质500存储有用于执行根据本申请的方法步骤的计算机程序431，可以被电子设备400的处理器410读取，当计算机程序431由电子设备400运行时，导致该电子设备400执行上面所描述的方法中的各个步骤，具体来说，该计算机可读存储介质存储的计算程序431可以执行上述任一实施例中示出的方法。计算机程序431可以以适当形式进行压缩。

应该注意的是上述实施例对本申请进行说明而不是对本申请进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本申请可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种页面生成方法，其特征在于，包括：

在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；

其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

2.如权利要求1所述的方法，其特征在于，所述遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式包括：

遍历所述模板，查找出非空白的文本节点，将文本节点的内容替换成预设占位符号，并为所述文本节点的父节点添加文字骨架样式。

3.如权利要求1所述的方法，其特征在于，所述遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式包括：

遍历所述模板，查找出图片标签节点；

将所述图片标签节点的src属性值替换为预设图片的地址，并为所述图片标签节点配置图片骨架样式，其中，预设图片的颜色为灰色。

4.如权利要求1所述的方法，其特征在于，所述遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式包括：

遍历所述模板，查找出内联样式数据所在的第一节点，将所述第一节点的样式替换为图片骨架样式；其中，所述内联样式数据的样式中包含图片，所述第一节点的类型不包括图片类型；

或者，遍历所述模板，查找出存在自定义图片标签属性的第二节点，将所述第二节点的样式替换为图片骨架样式；其中，所述自定义图片标签属性的src属性值为懒加载图片的地址，所述第二节点的类型不包括图片类型。

5.如权利要求1所述的方法，其特征在于，所述遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式包括：

遍历所述模板，找到v-if指令或v-for指令所在的第三节点，保留所述v-if指令中的第一个元素或所述v-for指令中的第一个元素，并对所述第一个元素之后的元素，根据元素类型进行替换处理。

6.如权利要求1-5中任一项所述的方法，其特征在于，

所述获取所述目标页面的模板包括：通过Vue预加载器获取所述目标页面的Vue模板；

在生成所述骨架屏页面后该方法还包括：通过Vue异步组件在所述目标页面未成功加载时，加载并展示所述骨架屏页面。

7.如权利要求6所述的方法，其特征在于，在获取所述目标页面的Vue模板之后，该方法进一步包括：

如果所述目标页面的Vue模板中存在自定义组件，则对所述Vue模板进行解析，具体包括：

步骤A，对所述Vue模板进行语法树解析，得到所述Vue模板中所述自定义组件的源模板文件和所述源模板文件的引用位置；

步骤B，根据所述源模板文件的引用位置查找所述源模板文件，利用所述源模板文件中的模板内容替换所述自定义组件；

重复所述步骤A和步骤B，直至所述目标页面的Vue模板中没有自定义组件。

8.一种页面生成装置，其特征在于，包括：

模板获取模块，用于在打包工具对目标页面的前端代码进行打包之前，获取所述目标页面的模板；其中，所述打包工具中引入有骨架屏加载器；

页面生成模块，用于遍历所述模板查找出所述模板中的目标DOM节点，将目标DOM节点的内容替换为预设占位内容，并为所述目标DOM节点配置相应的骨架样式后生成骨架屏页面；其中，所述目标页面为基于Vue框架开发的页面，所述骨架样式的类型与所述目标DOM节点的类型一致。

9.一种电子设备，其特征在于，所述电子设备包括：处理器，以及存储有可在处理器上运行的计算机程序的存储器；

其中，所述处理器，用于在执行所述存储器中的计算机程序时执行权利要求1-7中任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1-7中任一项所述的方法。