H5项目转换成Vue框架的方法、装置及计算机设备与流程

本申请涉及到计算机领域，特别是涉及到h5项目转换成vue框架的方法、装置及计算机设备。

背景技术：

相比于传统的前端h5项目，vue框架的使用可以极大的减少传统前端在代码中，直接对dom操作，数据和视图双向绑定，只需要改变数据，视图自动改变，这样极大的减少了代码量和提升了页面性能。目前市面上，还没有将传统架构项目自动转换成vue框架项目的工具，人工进行转换时过程复杂，耗时周期长且测试成本高，不利于vue框架的广泛推广。

技术实现要素：

本申请的主要目的为提供h5项目转换成vue框架的方法，旨在解决没有将传统架构项目自动转换成vue框架项目的工具的技术问题。

本申请提出一种h5项目转换成vue框架的方法，包括：

分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；

根据各所述信息标签对所述指定页面进行切片并存储；

将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；

将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；

将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

优选地，分析指定页面的页面信息的步骤之前，包括：

读取预配置的配置文件，获取待初始化的vue脚手架的配置内容；

执行第一运行命令安装全局脚手架生成库；

判断所述全局脚手架生成库是否安装成功；

若是，则通过执行第二运行命令调用所述全局脚手架生成库中的指定方法，生成所述vue脚手架。

优选地，所述将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件的步骤，包括：

判断具有相同信息标签的各切片的数量是否至少大于两个；

若是，则获取具有相同信息标签的各切片在所述指定页面中的排布次序；

按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件；

按照所述信息标签对应的标识属性，对所述指定子组件进行命名。

优选地，所述指定子组件包括页面内容模板文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：

判断第一切片是否携带section标签，其中，所述第一切片包含于所述指定页面对应的所有切片中；

若是，将各所述第一切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

优选地，判断第一切片是否携带section标签的步骤之后，包括：

若所述第一切片未携带section标签，则判断是否携带div标签，其中，所述第二切片包含于所述指定页面对应的所有切片中；

若是，则定义为第二切片，并判断所述第二切片中的代码内容数量是否超过预设数量；

若是，则将各所述第二切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

优选地，所述指定子组件还包括页面样式文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：

分析所述页面内容模板文件组件中的class属性和/或style属性；

根据所述class属性判断在所述指定页面对应的各所述切片中，是否存在携带style标签的第三切片，或根据所述style属性判断在所述指定页面对应的各所述切片中，是否存在携带link标签的第四切片，其中，所述第三切片和所述第四切片包含于所述指定页面对应的所有切片中；

若是，则将所述第三切片和/或第四切片中的代码数据，组合成所述页面样式文件组件；

若否，则将所述指定页面对应的所有代码内容，作为所述页面样式文件组件。

优选地，所述指定子组件还包括页面逻辑文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件步骤，包括：

按照方法名将所述指定页面的所有内容进行分区；

将各方方名对应分区的分区内容添加至script标签的method对象中；

分析所述指定页面中所述方法名以外的待执行事件，抽取出所述待执行事件的回调函数；

将所述待执行事件的回调函数与所述指定页面dom的选择器进行绑定，形成所述页面逻辑文件组件。

本申请还提供了一种h5项目转换成vue框架的装置，包括：

分析模块，用于分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；

切片模块，用于根据各所述信息标签对所述指定页面进行切片并存储；

组合模块，用于将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；

复合模块，用于将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；

存放模块，用于将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

本申请还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

本申请还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法的步骤。

本申请通过将h5项目中所有的页面分别对应成复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架，方便快捷。通过文件名进行一一对应，保证转换后vue组件的内容与转换前h5项目中所有的页面的内容一致，可以快速将一个传统的前端h5项目，转换成vue项目，可以减少转换操作消耗的时间和人力上的成本。转换后的项目，只需要安装好所需要的依赖，就可以通过npmrundev，使用vue-cli脚手架的所有功能，大大减少了搭建、配置、调试脚手架的时间和人力成本。而且转换后的项目，会根据不同的页面转换的组件自动通过文件夹进行分类，项目结构清晰。用户可以在转换后的项目中，自行修改任何需要自定义的脚手架配置，使用更便捷。

附图说明

图1本申请一实施例的h5项目转换成vue框架的方法流程示意图；

图2本申请一实施例的h5项目转换成vue框架的装置结构示意图；

图3本申请一实施例的计算机设备内部结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

参照图1，本申请一实施例的h5项目转换成vue框架的方法，包括：

s1：分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；

s2：根据各所述信息标签对所述指定页面进行切片并存储；

s3：将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；

s4：将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；

s5：将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

目前在国内前端行业内，主要流行的两大框架分别是vue框架和react框架，且vue框架在国内的份额超过react框架。相比于前端h5项目，vue框架的使用，可以极大的减少前端在代码中直接对dom操作，数据和视图双向绑定，只需要改变数据，视图自动改变，这样极大的减少了代码量并提升了页面性能。前端h5项目想要更换为vue框架的项目，成本是很重的。首先，需要对整个h5项目进行重新梳理逻辑，然后搭建脚手架，再将每一个功能模块拆分成组件，引入相关依赖文件等一系列操作，本申请的自动化框架转换工具，为h5项目自动转换成vue框架项目的工具，减少了上述每一步操作所需消耗的时间成本和测试成本，以降低h5项目转换框架的成本。

本实施例通过将h5项目中所有的页面分别对应成复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架，方便快捷。上述预设映射关系包括按照文件名进行一一对应的关系，保证内容的一致性。本实施例下载vue转换工具安装包，安装h5项目所需要的node_modules依赖文件，这个vue转换工具就算安装完成了。vue转换工具安装完成后，根据预配制参数自动生成一个配置文件json，配置文件中的所有配置项都有一个默认值，用户可以直接使用，也可以自定义配置。主要包括以下配置参数：“需要执行转换h5项目”的文件夹路径，路径支持绝对路径和相对路径，默认为vue转换工具的根目录。即只需要把h5项目整个拷贝到vue转换工具的根目录，然后把h5项目的文件夹名称修改为project即可，把h5项目的文件夹名称修改为project，是为了与预设的配置文件的格式相一致。vue脚手架默认为官方推荐的vue-cli中的webpack模板，用户可以更改为其他模板。转换成功后的项目目录，默认为原h5项目根目录的同级目录下。只需要在命令行中，定位到vue转换工具，然后执行命令npmrunbuild即可，脚本读取配置文件json，根据具体配置要求，转换h5项目。转换成功后的项目放置在配置文件中指定目录下。

进一步地，分析指定页面的页面信息的步骤s1之前，包括：

s11：读取预配置的配置文件，获取待初始化的vue脚手架的配置内容；

s12：执行第一运行命令安装全局脚手架生成库；

s13：判断所述全局脚手架生成库是否安装成功；

s14：若是，则通过执行第二运行命令调用所述全局脚手架生成库中的指定方法，生成所述vue脚手架。

自动初始化生成vue脚手架的过程为：在执行开始转换命令npmrunbuild命令后，会根据配置文件json的脚手架名称(如果用户未设置，则默认为vue-cliwebpack模板)，将该脚手架写入package.json，并下载依赖文件。具体流程以vue-cliwebpack模板为例：(1)执行npminstall-g@vue/cli安装全局脚手架生成库；(2)执行vuecreatevue-project生成项目脚手架；(3)默认脚手架的配置为default(babel，eslint)，安装vue-router、css预处理，不安装vuex、自动化测试和单元测试。本实施例的vue脚手架，引入的模块主要包括：(1)lodash，为常用的工具库，用于复杂数据处理操作；(2)log4js-node，为进程日志打印工具，在工具执行过程中，可以记录和输出错误日志；(3)cross-env，为环境变量适配工具，使得工具可以支持windows，mac，linux三种操作系统环境。

进一步地，所述将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件的步骤s3，包括：

s31：判断具有相同信息标签的各切片的数量是否至少大于两个；

s32：若是，则获取具有相同信息标签的各切片在所述指定页面中的排布次序；

s33：按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件；

s34：按照所述信息标签对应的标识属性，对所述指定子组件进行命名。

本实施例通过识别html中关于页面展示内容的body标签，以及引入js的script标签、引入css的link标签和style标签，对整段html按照上述三种类型进行切片处理。处理完成后，先放置在内存中。本实施例的切片原理：用文字解释的话，就是不同类型的语言，都有其特殊的文法和格式，分割的关键就是内容中所提到的找标签，找关键字，以便区分是哪一个类型的语言的代码片段，从而进行分割再拼接。比如说js代码片段，是包裹在html文件的script标签中，那么只要找到script标签，获取到标签内的代码片段，就是这个文件的js内容。如果有多个script标签，那么就按顺序依次获取到标签内的内容，然后依次按找到的顺序拼接，最后生成一个以.js后缀结尾的文件，形成vue框架的子组件。

进一步地，所述指定子组件包括页面内容模板文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤s33，包括：

s330：判断第一切片是否携带section标签，其中，所述第一切片包含于所述指定页面对应的所有切片中；

s331：若是，将各所述第一切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

进一步地，判断第一切片是否携带section标签的步骤s330之后，包括：

s332：若所述第一切片未携带section标签，则判断所述第二切片是否携带div标签，其中，所述第二切片包含于所述指定页面对应的所有切片中；

s333：若是，则定义为第二切片，并判断所述第二切片中的代码内容数量是否超过预设数量；

s334：若是，则将各所述第二切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

本实施例以子组件页面内容模板文件，即template文件的提取为例：对切片出来的body标签进行分析，按照section、div标签进行分块处理；具体规则如下：当遇到一个section标签，那么将整个section标签中的所有内容，作为一个页面的子组件的template文件标签；如果整个页面都没有section标签，那么寻找div标签，当遇到一个div标签的包裹内容超过30行代码，也将这个div标签包裹内的所有内容作为一个页面的子组件的template文件标签，组成页面内容模板文件组件。子组件拆分好以后，根据哪个页面拆分的子组件，会沿用原本html中该页面的名称，对拆分出来的子组件进行命名，如原html页面为index.html，拆分后的子组件为index_component_1.vue、index_component_2.vue等等，便于建立映射关联关系，用户可以在项目转换后，再自行修改名称。

进一步地，所述指定子组件还包括页面样式文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤s33，包括：

s335：分析所述页面内容模板文件组件中的class属性和/或style属性；

s336:根据所述class属性判断在所述指定页面对应的各所述切片中，是否存在携带style标签的第三切片，或根据所述style属性判断在所述指定页面对应的各所述切片中，是否存在携带link标签的第四切片，其中，所述第三切片和所述第四切片包含于所述指定页面对应的所有切片中，

s337:若是，则将所述第三切片和/或第四切片中的代码数据，组合成所述页面样式文件组件；

s338:若否，则将所述指定页面对应的所有代码内容，作为所述页面样式文件组件。

本实施例以子组件页面样式文件，即css样式文件的提取为例：分析子组件中template文件的class属性和/或style属性。对于class属性，会先在原来的html页面的style标签和/或link标签引入的文件中查找对应的css类内容，添加在.vue组件文件的style标签中；如果没有找到，则会查找整个待转换h5项目内容，并添加为子组件css样式文件。本申请其他实施例中，由于style属性属于内联样式，会提取出来生成一个新的类名，添加到.vue组件文件的style标签中，以方便管理文件。

进一步地，所述指定子组件还包括页面逻辑文件组件，所述按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件步骤s33，包括：

s33a:按照方法名将所述指定页面的所有内容进行分区；

s33b:将各方方名对应的分区内容添加至script标签的method对象中；

s33c:分析所述方法名以外的所述指定页面的待执行事件，抽取出所述待执行事件的回调函数；

s33d:将所述待执行事件的回调函数与所述指定页面dom的选择器进行绑定，形成所述页面逻辑文件组件。

本实施例的子组件页面逻辑文件，即js文件的提取为例：首先，会将原来的html文件中的script标签内容，按照方法名进行区分，加入到.vue组件文件script标签内容的method对象中。然后分析页面上方法名以外的点击事件，如document.addeventlistener、onclick、ontap等点击事件，抽取出对应的回调函数、绑定页面dom的选择器，以便给新生成template文件添加上对应的点击事件，形成所述页面逻辑文件组件。剩余未匹配到的js内容，将全部添加到子组件的create方法中执行。

参照图2，本申请一实施例的h5项目转换成vue框架的装置，包括：

分析模块1，用于分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；

切片模块2，用于根据各所述信息标签对所述指定页面进行切片并存储；

组合模块3，用于将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；

复合模块4，用于将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；

存放模块5，用于将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

目前在国内前端行业内，主要流行的两大框架分别是vue框架和react框架，且vue框架在国内的份额超过react框架。相比于前端h5项目，vue框架的使用，可以极大的减少前端在代码中直接对dom操作，数据和视图双向绑定，只需要改变数据，视图自动改变，这样极大的减少了代码量并提升了页面性能。前端h5项目想要更换为vue框架的项目，成本是很重的。首先，需要对整个h5项目进行重新梳理逻辑，然后搭建脚手架，再将每一个功能模块拆分成组件，引入相关依赖文件等一系列操作，本申请的自动化框架转换工具，为h5项目自动转换成vue框架项目的工具，减少了上述每一步操作所需消耗的时间成本和测试成本，以降低h5项目转换框架的成本。

本实施例通过将h5项目中所有的页面分别对应成复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架，方便快捷。上述预设映射关系包括按照文件名进行一一对应的关系，保证内容的一致性。本实施例下载vue转换工具安装包，安装h5项目所需要的node_modules依赖文件，这个vue转换工具就算安装完成了。vue转换工具安装完成后，根据预配制参数自动生成一个配置文件json，配置文件中的所有配置项都有一个默认值，用户可以直接使用，也可以自定义配置。主要包括以下配置参数：“需要执行转换h5项目”的文件夹路径，路径支持绝对路径和相对路径，默认为vue转换工具的根目录。即只需要把h5项目整个拷贝到vue转换工具的根目录，然后把h5项目的文件夹名称修改为project即可，把h5项目的文件夹名称修改为project，是为了与预设的配置文件的格式相一致。vue脚手架默认为官方推荐的vue-cli中的webpack模板，用户可以更改为其他模板。转换成功后的项目目录，默认为原h5项目根目录的同级目录下。只需要在命令行中，定位到vue转换工具，然后执行命令npmrunbuild即可，脚本读取配置文件json，根据具体配置要求，转换h5项目。转换成功后的项目放置在配置文件中指定目录下。

另一实施例中，h5项目转换成vue框架的装置，包括：

读取模块，用于读取预配置的配置文件，获取待初始化的vue脚手架的配置内容；

第一执行模块，用于执行第一运行命令安装全局脚手架生成库；

判断模块，用于判断所述全局脚手架生成库是否安装成功；

第二执行模块，用于若是，则通过执行第二运行命令调用所述全局脚手架生成库中的指定方法，生成所述vue脚手架。

自动初始化生成vue脚手架的过程为：在执行开始转换命令npmrunbuild命令后，会根据配置文件json的脚手架名称(如果用户未设置，则默认为vue-cliwebpack模板)，将该脚手架写入package.json，并下载依赖文件。具体流程以vue-cliwebpack模板为例：(1)执行npminstall-g@vue/cli安装全局脚手架生成库；(2)执行vuecreatevue-project生成项目脚手架；(3)默认脚手架的配置为default(babel，eslint)，安装vue-router、css预处理，不安装vuex、自动化测试和单元测试。本实施例的vue脚手架，引入的模块主要包括：(1)lodash，为常用的工具库，用于复杂数据处理操作；(2)log4js-node，为进程日志打印工具，在工具执行过程中，可以记录和输出错误日志；(3)cross-env，为环境变量适配工具，使得工具可以支持windows，mac，linux三种操作系统环境。

进一步地，组合模块，包括：

判断单元，用于判断具有相同信息标签的各切片的数量是否至少大于两个；

获取单元，用于若是，则获取具有相同信息标签的各切片在所述指定页面中的排布次序；

拼接单元，用于按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件；

命名模块，用于按照所述信息标签对应的标识属性，对所述指定子组件进行命名。

本实施例通过识别html中关于页面展示内容的body标签，以及引入js的script标签、引入css的link标签和style标签，对整段html按照上述三种类型进行切片处理。处理完成后，先放置在内存中。本实施例的切片原理：用文字解释的话，就是不同类型的语言，都有其特殊的文法和格式，分割的关键就是内容中所提到的找标签，找关键字，以便区分是哪一个类型的语言的代码片段，从而进行分割再拼接。比如说js代码片段，是包裹在html文件的script标签中，那么只要找到script标签，获取到标签内的代码片段，就是这个文件的js内容。如果有多个script标签，那么就按顺序依次获取到标签内的内容，然后依次按找到的顺序拼接，最后生成一个以.js后缀结尾的文件，形成vue框架的子组件。

一实施例中，拼接单元，包括：

第一判断子单元，用于判断第一切片是否携带section标签，其中，所述第一切片包含于所述指定页面对应的所有切片中；

第一拼接子单元，用于若是，将各所述第一切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

进一步地，拼接单元，包括：

第二判断子单元，用于若所述第一切片未携带section标签，则判断所述第二切片是否携带div标签，其中，所述第二切片包含于所述指定页面对应的所有切片中；

第三判断子单元，用于若是，则定义为第二切片，并判断所述第二切片中的代码内容数量是否超过预设数量；

第二拼接子单元，用于若是，则将各所述第二切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

本实施例以子组件页面内容模板文件，即template文件的提取为例：对切片出来的body标签进行分析，按照section、div标签进行分块处理；具体规则如下：当遇到一个section标签，那么将整个section标签中的所有内容，作为一个页面的子组件的template文件标签；如果整个页面都没有section标签，那么寻找div标签，当遇到一个div标签的包裹内容超过30行代码，也将这个div标签包裹内的所有内容作为一个页面的子组件的template文件标签，组成页面内容模板文件组件。子组件拆分好以后，根据哪个页面拆分的子组件，会沿用原本html中该页面的名称，对拆分出来的子组件进行命名，如原html页面为index.html，拆分后的子组件为index_component_1.vue、index_component_2.vue等等，便于建立映射关联关系，用户可以在项目转换后，再自行修改名称。

另一实施例中，拼接单元，包括：

分析子单元，用于分析所述页面内容模板文件组件中的class属性和/或style属性；

第四判断子单元，用于根据所述class属性判断在所述指定页面对应的各所述切片中，是否存在携带style标签的第三切片，或根据所述style属性判断在所述指定页面对应的各所述切片中，是否存在携带link标签的第四切片，其中，所述第三切片和所述第四切片包含于所述指定页面对应的所有切片中，

组合子单元，用于若是，则将所述第三切片和/或第四切片中的代码数据，组合成所述页面样式文件组件；

作为子单元，用于若否，则将所述指定页面对应的所有代码内容，作为所述页面样式文件组件。

本实施例以子组件页面样式文件，即css样式文件的提取为例：分析子组件中template文件的class属性和/或style属性。对于class属性，会先在原来的html页面的style标签和/或link标签引入的文件中查找对应的css类内容，添加在.vue组件文件的style标签中；如果没有找到，则会查找整个待转换h5项目内容，并添加为子组件css样式文件。本申请其他实施例中，由于style属性属于内联样式，会提取出来生成一个新的类名，添加到.vue组件文件的style标签中，以方便管理文件。

再一实施例中，拼接单元，包括：

分区子单元，用于按照方法名将所述指定页面的所有内容进行分区；

添加子单元，用于将各方方名对应的分区内容添加至script标签的method对象中；

抽取子单元，用于分析所述方法名以外的所述指定页面的待执行事件，抽取出所述待执行事件的回调函数；

绑定子单元，用于将所述待执行事件的回调函数与所述指定页面dom的选择器进行绑定，形成所述页面逻辑文件组件。

本实施例的子组件页面逻辑文件，即js文件的提取为例：首先，会将原来的html文件中的script标签内容，按照方法名进行区分，加入到.vue组件文件script标签内容的method对象中。然后分析页面上方法名以外的点击事件，如document.addeventlistener、onclick、ontap等点击事件，抽取出对应的回调函数、绑定页面dom的选择器，以便给新生成template文件添加上对应的点击事件，形成所述页面逻辑文件组件。剩余未匹配到的js内容，将全部添加到子组件的create方法中执行。

参照图3，本申请实施例中还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储h5项目转换成vue框架过程需要的所有数据。该计算机设备的网络接口用于与外部的端通过网络连接通信。该计算机程序被处理器执行时以实现h5项目转换成vue框架。

上述处理器执行上述前端h5项目转换成vue框架的方法，包括：分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；根据各所述信息标签对所述指定页面进行切片并存储；将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

上述计算机设备，通过将h5项目中所有的页面分别对应成复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架，方便快捷。通过文件名进行一一对应，保证转换后vue组件的内容与转换前h5项目中所有的页面的内容一致，可以快速将一个传统的前端h5项目，转换成vue项目，可以减少转换操作消耗的时间和人力上的成本。转换后的项目，只需要安装好所需要的依赖，就可以通过npmrundev，使用vue-cli脚手架的所有功能，大大减少了搭建、配置、调试脚手架的时间和人力成本。而且转换后的项目，会根据不同的页面转换的组件自动通过文件夹进行分类，项目结构清晰。用户可以在转换后的项目中，自行修改任何需要自定义的脚手架配置，使用更便捷。

在一个实施例中，上述处理器分析指定页面的页面信息的步骤之前，包括：读取预配置的配置文件，获取待初始化的vue脚手架的配置内容；执行第一运行命令安装全局脚手架生成库；判断所述全局脚手架生成库是否安装成功；若是，则通过执行第二运行命令调用所述全局脚手架生成库中的指定方法，生成所述vue脚手架。

在一个实施例中，上述处理器将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件的步骤，包括：判断具有相同信息标签的各切片的数量是否至少大于两个；若是，则获取具有相同信息标签的各切片在所述指定页面中的排布次序；按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件；按照所述信息标签对应的标识属性，对所述指定子组件进行命名。

在一个实施例中，所述指定子组件包括页面内容模板文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：判断第一切片是否携带section标签，其中，所述第一切片包含于所述指定页面对应的所有切片中；若是，将各所述第一切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

在一个实施例中，上述处理器判断第一切片是否携带section标签的步骤之后，包括：若所述第一切片未携带section标签，则判断是否携带div标签，其中，所述第二切片包含于所述指定页面对应的所有切片中；若是，则定义为第二切片，并判断所述第二切片中的代码内容数量是否超过预设数量；若是，则将各所述第二切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

在一个实施例中，所述指定子组件还包括页面样式文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：分析所述页面内容模板文件组件中的class属性和/或style属性；根据所述class属性判断在所述指定页面对应的各所述切片中，是否存在携带style标签的第三切片，或根据所述style属性判断在所述指定页面对应的各所述切片中，是否存在携带link标签的第四切片，其中，所述第三切片和所述第四切片包含于所述指定页面对应的所有切片中；若是，则将所述第三切片和/或第四切片中的代码数据，组合成所述页面样式文件组件；若否，则将所述指定页面对应的所有代码内容，作为所述页面样式文件组件。

在一个实施例中，所述指定子组件还包括页面逻辑文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件步骤，包括：按照方法名将所述指定页面的所有内容进行分区；将各方方名对应分区的分区内容添加至script标签的method对象中；分析所述指定页面中所述方法名以外的待执行事件，抽取出所述待执行事件的回调函数；将所述待执行事件的回调函数与所述指定页面dom的选择器进行绑定，形成所述页面逻辑文件组件。

本领域技术人员可以理解，图3中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定。

本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现h5项目转换成vue框架的方法，包括：分析指定页面的页面信息，其中，所述指定页面属于所述h5项目中包含的所有页面，所述页面信息包括页面内涵盖的信息标签；根据各所述信息标签对所述指定页面进行切片并存储；将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件；将各所述预设子组件复合，得到所述指定页面对应的复合vue组件；将所述h5项目中所有的页面分别对应的复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架。

上述计算机可读存储介质，通过将h5项目中所有的页面分别对应成复合vue组件，按照预设映射关系存放于预先初始化生成的vue脚手架内，形成所述h5项目对应的vue框架，方便快捷。通过文件名进行一一对应，保证转换后vue组件的内容与转换前h5项目中所有的页面的内容一致，可以快速将一个传统的前端h5项目，转换成vue项目，可以减少转换操作消耗的时间和人力上的成本。转换后的项目，只需要安装好所需要的依赖，就可以通过npmrundev，使用vue-cli脚手架的所有功能，大大减少了搭建、配置、调试脚手架的时间和人力成本。而且转换后的项目，会根据不同的页面转换的组件自动通过文件夹进行分类，项目结构清晰。用户可以在转换后的项目中，自行修改任何需要自定义的脚手架配置，使用更便捷。

在一个实施例中，上述处理器分析指定页面的页面信息的步骤之前，包括：读取预配置的配置文件，获取待初始化的vue脚手架的配置内容；执行第一运行命令安装全局脚手架生成库；判断所述全局脚手架生成库是否安装成功；若是，则通过执行第二运行命令调用所述全局脚手架生成库中的指定方法，生成所述vue脚手架。

在一个实施例中，上述处理器将具有相同信息标签的各切片，按照预设组合方式进行组合得到预设子组件的步骤，包括：判断具有相同信息标签的各切片的数量是否至少大于两个；若是，则获取具有相同信息标签的各切片在所述指定页面中的排布次序；按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件；按照所述信息标签对应的标识属性，对所述指定子组件进行命名。

在一个实施例中，所述指定子组件包括页面内容模板文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：判断第一切片是否携带section标签，其中，所述第一切片包含于所述指定页面对应的所有切片中；若是，将各所述第一切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

在一个实施例中，上述处理器判断第一切片是否携带section标签的步骤之后，包括：若所述第一切片未携带section标签，则判断是否携带div标签，其中，所述第二切片包含于所述指定页面对应的所有切片中；若是，则定义为第二切片，并判断所述第二切片中的代码内容数量是否超过预设数量；若是，则将各所述第二切片按照在所述指定页面中的排布次序，依次拼接组成所述页面内容模板文件组件。

在一个实施例中，所述指定子组件还包括页面样式文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件的步骤，包括：分析所述页面内容模板文件组件中的class属性和/或style属性；根据所述class属性判断在所述指定页面对应的各所述切片中，是否存在携带style标签的第三切片，或根据所述style属性判断在所述指定页面对应的各所述切片中，是否存在携带link标签的第四切片，其中，所述第三切片和所述第四切片包含于所述指定页面对应的所有切片中；若是，则将所述第三切片和/或第四切片中的代码数据，组合成所述页面样式文件组件；若否，则将所述指定页面对应的所有代码内容，作为所述页面样式文件组件。

在一个实施例中，所述指定子组件还包括页面逻辑文件组件，上述处理器按照所述排布次序，将具有相同信息标签的各切片中的代码数据进行拼接，形成指定子组件步骤，包括：按照方法名将所述指定页面的所有内容进行分区；将各方方名对应分区的分区内容添加至script标签的method对象中；分析所述指定页面中所述方法名以外的待执行事件，抽取出所述待执行事件的回调函数；将所述待执行事件的回调函数与所述指定页面dom的选择器进行绑定，形成所述页面逻辑文件组件。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，上述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双速据率sdram(ssrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

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

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