将前端vue组件编译为原生组件的方法、装置、设备及介质与流程

1.本发明涉及计算机技术领域，尤其涉及一种将前端vue组件编译为原生组件的方法、装置、设备及介质。


背景技术：

2.目前前端领域内，大部分项目的开发都是使用框架进行组件式开发，常见的框架主要有vue，框架的开发主要作用是能够给开发者带来语法上编写的便利，简化开发者自行开发打包构建等内容。但是，并不是所有的项目都适合通过框架进行开发，特别是对于一些小型的项目来说，原因有以下几点：
3.(1)引入框架进行开发，反而增加开发者需要进行项目初始化框架搭建的工序，也使得开发者需要掌握框架语法相关的内容；
4.(2)由于框架代码库本身具备一定的资源体积，当用户在弱网环境下，会增加应用加载等待时间；
5.(3)通过框架语法开发的代码最后也是通过浏览器编译解析成原生语言，才可以正常运行的，浏览器解析也需要耗费时间，增加用户打开页面等待时长。
6.为了适配这些小型项目的需求，前端的javascript语言已经在前些年推出了原生组件的语法，由于当时刚推出各大浏览器厂商的兼容性不够好，所以还没有广泛推广，时至今日已经得到了大部分浏览器厂商的支持。针对与小项目来说，是非常适合直接使用原生组件进行开发的。
7.目前通常的情况是，大部分公司都采用了框架的组件式开发，尤其是vue框架在中小型公司非常盛行。现有存在大量公共的功能都是通过vue组件语法进行编写的。当小项目采用原生语法，不使用框架进行开发时，就会存在现有的vue组件无法直接复用到采用原生语法编写的小型项目中，导致需要进行重复开发、开发效率低。


技术实现要素：

8.针对上述技术问题，本发明的目的在于提供一种将前端vue组件编译为原生组件的方法、装置、设备及介质，旨在解决采用原生语法，不使用框架开发项目时，现有vue组件无法直接复用到采用原生语法编写的小型项目中，导致需要重复开发、开发效率低的技术问题。
9.为了解决上述技术问题，第一方面，本发明实施例提供一种将前端vue组件编译为原生组件的方法，包括：
10.获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；
11.根据所述vue组件地址查找对应的vue组件；
12.基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；
13.基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。
14.进一步的，所述初始化原生组件内容，得到初始原生组件，包括：
15.创建一个以所述vue组件的名称为文件名且以html为扩展名的文件，得到第一文件；
16.创建一个以js为扩展名且用于声明原生组件的类的文件，得到第二文件；
17.将所述第二文件加载进所述第一文件中；
18.向所述原生组件的类中增加基础内容，得到增加基础内容后的原生组件的类；其中，所述基础内容包括constructor函数，所述constructor函数用于获得继承类所有的静态属性和方法函数；
19.基于所述vue组件的名称和所述增加基础内容后的原生组件的类，根据预设的定义方法生成初始原生组件。
20.进一步的，所述基于所述初始原生组件，根据原生组件的语法，将所述vue组件的页面展示模板代码编译成原生组件适用的语法，包括：
21.将所述vue组件的页面展示模板标签内的所有内容以及所述页面展示模板标签本身复制到所述第一文件中；
22.根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译。
23.进一步的，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
24.当在所述页面展示模板标签内查到@click关键字时，在所述@click所在标签上增加一个id属性；其中，若在所述页面展示模板标签内查到@click关键字，则认为所述页面展示模板绑定了点击事件；
25.在所述点击事件触发后，获取执行所述点击事件函数的方法名；
26.根据所述方法名查找得到所述方法对应的函数本体；
27.将所述函数本体复制到回调函数的内容中；
28.根据所述id属性，获取当前点击事件所在元素；
29.在所述constructor函数内，通过添加事件监听的方法给所述元素添加点击事件；其中，所述点击事件触发时触发所述回调函数。
30.进一步的，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
31.当在所述页面展示模板标签内查到v-for关键字时，获取所述v-for属性对应的属性值；所述属性值为数组类型的数据，所述数组类型的数据是一个变量的形式，表示通过遍历数组内所有元素并将每一个元素作为列表的一项；其中，若在所述页面展示模板标签内查到v-for关键字，则认为所述页面展示模板绑定了for循环标签；
32.在所述v-for属性所在标签的父级标签上增加一个id属性；
33.获取所述数组中每一元素展示的内容；
34.根据预设的规则，对每一元素展示的内容进行转换，得到转换后每一元素展示的内容；
35.在所述constructor函数内，以循环体循环的数据为所述数组、循环拼装的内容为所述转换后每一元素展示的内容生成一个for循环体，得到一列表；
36.根据所述id属性，查找父级元素，并将所述列表作为所述父级元素新的子元素。
37.进一步的，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
38.当在所述页面展示模板标签内查找到插值表达式，获取所述插值表达式内的变量以及所述变量的默认值；其中，若所述页面展示模板标签内查找到插值表达式，则认为所述页面展示模板绑定了插值表达式；
39.获取所述插值表达式内的变量以及所述变量的默认值；
40.将所述默认值复制到所述constructor函数内，作为所述原生组件初始化时定义的默认值；
41.通过所述变量查找得到包含所述变量的方法函数；
42.将所述方法函数复制到与所述constructor函数的同一个层级中，作为所述原生组件的静态方法函数。
43.进一步的，所述基于所述初始原生组件，根据原生组件语法，将所述vue组件的样式代码编译成所述原生组件适用的语法，具体包括：
44.查找所述vue组件内部的样式标签，复制所述样式标签的所有内容；
45.在所述页面展示模板标签内的顶层位置，生成一个新的样式标签；
46.将所述样式标签的所有内容粘贴到所述新的样式标签内。
47.第二方面，本技术实施例提供一种将前端vue组件编译为原生组件的装置，包括：
48.获取模块，用于获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；
49.查找模块，用于根据所述vue组件地址查找对应的vue组件；
50.初始化模块，用于基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；
51.编译模块，用于基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及vue组件的样式代码编译成所述原生组件适用的语法。
52.第三方面，本技术实施例提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现如上述任一项所述方法的步骤。
53.第四方面，本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一项所述的方法的步骤。
54.本发明实施例提供的一种将前端vue组件编译为原生组件的方法，通过智能识别现有vue组件(基于vue框架编写的组件)的语法，并按照原生组件的现有语法对其进行编译改造，使得现有的vue组件可以直接通过编译得到原生组件，如此，开发者在利用原生组件开发项目时，对同一功能无需再按照原生组件逻辑进行二次开发，从而节省了开发时间以及人力成本，提高了开发项目的开发效率。此外，通过将vue组件编译为原生组件可以使得小型项目摆脱框架的束缚，不再需要为了能够复用框架开发的组件而被迫牺牲用户的加载性能，从而减少了应用加载等待时间。另外，本发明实施例编译得到的原生组件由于是按照统一的编码风格和格式生成的，因此，对于框架项目的代码风格和格式的统一打下了良好的基础，后续如果需要在编译后生成的原生组件进行修改和开发，对于不同开发人员来说，
降低了理解和阅读成本，可以实现快速迭代开发新功能。最后，由于本发明实施例能够根据指令自动将vue组件编译为原生组件，因此，开发者无需掌握太多的与框架语法相关的内容，从而降低小型项目开发门槛。
附图说明
55.为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
56.图1是本发明第一实施例提供的将前端vue组件编译为原生组件的方法的流程示意图；
57.图2是本发明第一实施例提供的初始化原生组件内容，得到初始原生组件的流程图；
58.图3是本发明第一实施例提供的将vue组件的页面展示模板代码编译成原生组件适用的语法的流程图；
59.图4是本发明第一实施例提供的当页面展示模板绑定点击事件时的编译方法流程图；
60.图5是本发明第一实施例提供的当页面展示模板绑定for循环标签时的编译方法流程图；
61.图6是本发明第一实施例提供的当页面展示模板绑定插值表达式时的编译方法流程图；
62.图7是本发明第一实施例提供的将vue组件的样式代码编译成原生组件适用的语法的流程图；
63.图8是本发明第二实施例提供的将前端vue组件编译为原生组件的装置的结构示意图；
64.图9为本发明第三实施例提供的计算机设备的结构示意框图。
具体实施方式
65.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
66.实施例一：
67.请参阅图1，本发明第一实施例提供了一种将前端vue组件编译为原生组件的方法，其可由将前端vue组件编译为原生组件的计算机设备来执行，所述将前端vue组件编译为原生组件的计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。
68.本发明实施例提供一种将前端vue组件编译为原生组件的方法，包括：
69.s1、获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；
70.s2、根据所述vue组件地址查找对应的vue组件；
71.s3、基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；
72.s4、基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及vue组件的样式代码编译成所述原生组件适用的语法。
73.于上述步骤s1中，需要说明的是，所述配置文件config.js的配置内容是由用户设置的，所配置的内容为需要编译为原生组件的vue组件的地址。需要说明的是，所述配置文件中的配置内容不只是只有一个vue组件地址，若需将多个vue组件编译成原生组件，那么，配置文件中的配置内容包括多个vue组件对应的地址。当执行本方法的计算机设备获得所述配置文件后，会根据配置文件中的vue组件地址，遍历检索项目中每一个vue组件，然后对每一个vue组件进行后续步骤的操作。
74.于上述步骤s3中，需要说明的是，将vue组件的页面展示模板代码编译成原生组件适用的语法是基于初始原生组件的，因此，在将vue组件的页面展示模板代码以及vue组件的样式代码编译成原生组件适用的语法之前，初始化原生组件。
75.于上述步骤s4中，需要说明的是，虽然vue组件和原生组件页面展示代码都是编写在页面展示模板标签(template模板标签)内，但是标签的内部内容有着明显的区别，最大的区别在于vue组件的模板内容包含了各类vue框架独有的语法，因此，将vue组件编译成原生组件需要将vue组件页面展示模板代码编译成原生组件适用的语法，才可以直接使用。
76.实际中，本发明实施例作为一种将前端vue组件编译为原生组件的工具使用，在使用本工具之前，首先确保本工具能够运行在计算机系统上，以将本工具安装在mac系统上为例，使用时，第一步：在命令行，定位需要将vue组件所在的项目根目录，执行命令，npm i vue-component-to-web-component-d，就可以添加该工具到当前项目中。第二步：设置配置文件config.js，配置文件内容为：需要编译为原生组件的vue组件的地址。第三步：项目的构建；具体的，在命令行，定位当前项目根目录，执行命令npm run to-web-component，执行过程中，会涉及到上述步骤s1-s5。执行完成后，即可以得到一份由vue组件编译得到的原生组件目录，目录内包含相同功能的原生组件语法编写的组件。
77.本发明实施例提供的一种将前端vue组件编译为原生组件的方法，通过智能识别现有vue组件(基于vue框架编写的组件)的语法，并按照原生组件的现有语法对其进行编译改造，使得现有的vue组件可以直接通过编译得到原生组件，如此，开发者在利用原生组件开发项目时，对同一功能无需再按照原生组件逻辑进行二次开发，从而节省了开发时间以及人力成本，提高了开发项目的开发效率。此外，通过将vue组件编译为原生组件可以使得小型项目摆脱框架的束缚，不再需要为了能够复用框架开发的组件而被迫牺牲用户的加载性能，从而减少了应用加载等待时间。另外，本发明实施例编译得到的原生组件由于是按照统一的编码风格和格式生成的，因此，对于框架项目的代码风格和格式的统一打下了良好的基础，后续如果需要在编译后生成的原生组件进行修改和开发，对于不同开发人员来说，降低了理解和阅读成本，可以实现快速迭代开发新功能。最后，由于本发明实施例能够根据指令自动将vue组件编译为原生组件，因此，开发者无需掌握太多的与框架语法相关的内容，从而降低小型项目开发门槛。
78.请参阅图2，在一个实施例中，所述初始化原生组件内容，得到初始原生组件，包括：
79.s21、创建一个以所述vue组件的名称为文件名且以html为扩展名的文件，得到第
一文件；
80.s22、创建一个以js为扩展名且用于声明原生组件的类的文件，得到第二文件；
81.s23、将所述第二文件加载进所述第一文件中；
82.s24、向所述原生组件的类中增加基础内容，得到增加基础内容后的原生组件的类；其中，所述基础内容包括constructor函数，所述constructor函数用于获得继承类所有的静态属性和方法函数；
83.s25、基于所述vue组件的名称和所述增加基础内容后的原生组件的类，根据预设的定义方法生成初始原生组件。
84.于上述步骤s21中，需要说明的是，由于原生组件的模板内容，在使用的时候，是直接复制到html文件的具体位置中的，因此，初始化原生组件内容的第一步是要新建一个以html为扩展名的文件，即以html结尾的文件，该文件名沿用当前vue组件的文件名称，例如：a.vue组件，那么新建的.html结尾的文件为a.html。
85.于上述步骤s22中，需要说明的是，原生组件是一个class类的形式声明，其继承于浏览器原生类htmlulistelement。通过class关键字，声明一个与vue组件同名的类，并继承自原生类htmlulistelement，如class a extends htmlulistelement{类代码块内容}。需要说明的是，目前类代码块内容暂时为空，后续步骤会不断在里面生成对应的组件相关的逻辑内容。
86.于上述步骤s23中，需要说明的是，由于用户访问一个页面的时候，访问的地址是一个html页面的url，页面上的逻辑部分是通过引入js文件加载进来的，因此，需要将所述以js为扩展名且用于声明原生组件的类的文件加载进第一文件。
87.于上述步骤s24中，需要说明的是，由于原生组件的类初始化执行时，是在constructor函数内执行的，所以需要在上述{类代码块内容}中新增一个constructor函数，该函数内容，目前仅生成一行代码，即为通过执行super函数，调用继承类的方法，以获得继承类所有的静态属性和方法函数。
88.于上述步骤s25中，需要说明的是，由于原生组件的类需要定义后原生组件才能够在html上正常使用，因此，需要对原生组件的类进行定义。具体的，通过浏览器原生提供的页面元素相关的customelements对象下的define方法进行定义。其中，调用define定义方法的时候，需要传入两个参数，一个参数是组件的名称，该名称取值为vue组件的名称，第二个参数是经过步骤s24后的原生组件的类。
89.请参阅图3，在一个实施例中，所述基于所述初始原生组件，根据原生组件的语法，将所述vue组件的页面展示模板代码编译成原生组件适用的语法，包括：
90.s31、将所述vue组件的页面展示模板标签内的所有内容以及所述页面展示模板标签本身复制到所述第一文件中；
91.s32、根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译。
92.在本发明实施例中，需要说明的是，虽然vue组件和原生组件页面展示代码都是编写在页面展示模板标签(template模板标签)内，但是标签的内部内容有着明显的区别，最大的区别在于vue组件的模板内容包含了各类vue框架独有的语法，因此，将vue组件编译成原生组件需要将vue组件页面展示模板代码编译成原生组件适用的语法，才可以直接使用。
93.于上述步骤s31中，需要说明的是，页面展示模板标签在html中通常命名为template模板标签。应当理解的是，html(hyper text markup language)的全称为超文本标记语言，其是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。
94.于上述步骤s32中，需要说明的是，由于vue组件的页面展示模板(template模板)上绑定了点击事件、for循环标签、插值表达式等对象，由于对于不同的对象，相应的编译方法也不一样，因此，需要根据不同对象采用对应的方法进行编译。
95.请参阅图4，在一个实施例中，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
96.s41、当在所述页面展示模板标签内查到@click关键字时，在所述@click所在标签上增加一个id属性；其中，若在所述页面展示模板标签内查到@click关键字，则认为所述页面展示模板绑定了点击事件；
97.s42、在所述点击事件触发后，获取执行所述点击事件函数的方法名；
98.s43、根据所述方法名查找得到所述方法对应的函数本体；
99.s44、将所述函数本体复制到回调函数的内容中；
100.s45、根据所述id属性，获取所述点击事件所在元素；
101.s46、在所述constructor函数内，通过添加事件监听的方法给所述元素添加点击事件；其中，所述点击事件触发时触发所述回调函数。
102.于上述步骤s41中，由于在vue组件的页面展示模板标签(template模板标签)中，点击事件是通过@click关键字属性进行绑定对应的回调函数来实现的，而在原生组件中，是需要增加点击事件监听函数才可以实现的，因此，在粘贴了vue组件的页面展示模板标签(template模板标签)内的所有内容以及所述页面展示模板标签本身的文件中，当查找到template标签内存在@click关键字时，则先在当前标签内，增加一个id属性，目的是用来监听事件绑定对应的页面元素使用的。id属性的值的命名规则为：当前组件的名称 下划线 @click关键字属性的属性值对应的方法名称。如：对于@click＝方法a，当前组件的名称为a，则id属性的值为a_方法a。
103.于上述步骤s42、s43中，具体地，在点击事件触发后，通过@click关键字属性对应的属性值，即点击事件触发后所执行方法函数的方法名，通过该方法名，在vue组件内的methods对象中，找到对应方法函数本体。
104.于上述步骤s44中，需要说明的是，由于点击事件是通过@click关键字属性进行绑定对应的回调函数来实现的，因此，需要将点击事件触发后所执行方法函数的函数本体复制到回调函数的内容中。
105.于上述步骤s45中，具体地，编写获取当前点击事件所在元素的代码，通过浏览器自带的文档对象下的获取当前元素id的方法，获取步骤s41中添加id属性的元素(即获取当前点击事件所在元素)，如document.getelementbyid。
106.于上述步骤s46中，具体地，在步骤s24中所述的constructor函数内，通过浏览器自带的添加事件监听的方法，给步骤s45中获取到的元素，添加点击事件(click事件)。其中，点击事件所触发的回调函数是一个匿名函数，匿名函数所包含的内容为所述方法函数本体。
107.请参阅图5，在一个实施例中，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
108.s51、当在所述页面展示模板标签内查到v-for关键字时，获取所述v-for属性对应的属性值；所述属性值为数组类型的数据，所述数组类型的数据是一个变量的形式，表示通过遍历数组内所有元素并将每一个元素作为列表的一项；其中，若在所述页面展示模板标签内查到v-for关键字，则认为所述页面展示模板绑定了for循环标签；
109.s52、在所述v-for属性所在标签的父级标签上增加一个id属性；
110.s53、获取所述数组中每一元素展示的内容；
111.s54、根据预设的规则，对每一元素展示的内容进行转换，得到转换后每一元素展示的内容；
112.s55、在所述constructor函数内，以循环体循环的数据为所述数组、循环拼装的内容为所述转换后每一元素展示的内容生成一个for循环体，得到一列表；
113.s56、根据所述id属性，查找父级元素，并将所述列表作为所述父级元素新的子元素。
114.在本发明实施例中，需要说明的是，vue组件template模板上的for循环标签是通过模板指令v-for实现的，其功能主要是用于列表内相同结构内容，只需要在template模板标签内通过一个数组循环单个列表元素，就可以展示列表所有元素的内容，简化了模板代码的编写。由于在原生组件中，暂时没有提供这类语法，所以需要通过原生逻辑去实现，需要进行编译才能够为原生组件使用。
115.于上述步骤s51中，当在粘贴了vue组件的页面展示模板标签(template模板标签)内的所有内容以及所述页面展示模板标签本身的第一文件中查找到页面展示模板(template模板)标签内，存在v-for关键字时，则获取v-for属性对应的属性值，一般取得的值为in数据类型的数据，该数据类型的数据是一个变量的形式，表示通过遍历数组内所有元素，并将每一个元素作为列表的一项，并在这一项进行该元素的相关展示。
116.于上述步骤s52中，需要说明的是，由于整个列表的内容是包裹在v-for属性所在的标签的父级标签上的，而为了在后面步骤中能够将通过动态循环拼装得到列表内容，替换父级标签内部的所有内容，因此，需要在父级标签上增加一个id属性，id属性的值的命名规则为：当前组件的名称 下划线 数组变量名称：如当前vue组件名称为a，数组变量名称为列表s，则id属性的值为a_列表a；
117.于上述步骤s53中，需要说明的是，一般的，列表中单个元素展示的内容是由固定不变的内容和动态展示内容相结合的。如一个li标签元素：《li》不变的固定内容a{{动态内容}}不变的固定内容b《li》。
118.于上述步骤s54中，需要说明的是，在标签中通过插值表达展示的动态内容，需要改为通过模板字符串形式的${动态内容}，并在li标签外围包裹一层``符号，如步骤s53所举例的内容，需要变为`《li》不变的固定内容a${动态内容，即数组中单个元素内容}不变的固定内容b《/li》`。
119.于上述步骤s55，需要说明的是，对于步骤s54中的举例，本步骤所获得的列表为多个li标签叠加得到的完整列表。
120.请参阅图6，在其中一实施例中，所述根据所述页面展示模板所绑定的对象，基于
所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
121.s61、当在所述页面展示模板标签内查找到插值表达式时，获取所述插值表达式内的变量以及所述变量的默认值；其中，若所述页面展示模板标签内查找到插值表达式，则认为所述页面展示模板绑定了插值表达式；
122.s62、将所述默认值复制到所述constructor函数内，作为所述原生组件初始化时定义的默认值；
123.s63、通过所述变量查找得到包含所述变量的方法函数；
124.s64、将所述方法函数复制到与所述constructor函数的同一个层级中，作为所述原生组件的静态方法函数。
125.于上述步骤s61中，需要说明的是，vue组件的页面展示模板(template模板)上的插值表达式是通过双花括号的形式实现的，目的是用于在页面上动态的展示内容。而在原生组件中，并没有提供类似的语法，因此，需要将其编译为原生逻辑实现，才能够为原生组件使用，具体编译方法如下：
126.当在粘贴了vue组件的页面展示模板标签(template模板标签)内的所有内容以及所述页面展示模板标签本身的第一文件中查找到页面展示模板标签(template模板)内，存在双花括号的元素标签内容，即查找到插值表达式，则将其判定为页面展示模板采用了插值表达式进行内容的动态展示，动态展示的内容即为插值表达式的内容。然后，获取插值表达式内的变量，该变量的默认值定义在vue组件的data对象内，将其默认值复制到s24中所述的constructor函数内，作为原生组件初始化定义的默认值。
127.在本实施例中，需要说明的是，出现在v-for循环体内的双花括号是按照for循环标签处理的，并不按照插值表达式处理。
128.于上述步骤s63、s64中，需要说明的是，对于变量的动态控制，通常都是编写在vue组件的script标签内的methods对象内的方法函数中，通过变量查找到包含该变量的方法函数，将该方法函数复制到步骤s24中所述的constructor函数的同一个层级中，以作为所述原生组件的静态方法函数。
129.请参阅图7，在一个实施例中，所述基于所述初始原生组件，根据原生组件语法，将所述vue组件的样式代码编译成所述原生组件适用的语法，具体包括：
130.s71、查找所述vue组件内部的样式标签，复制所述样式标签的所有内容；
131.s73、在所述页面展示模板标签内的顶层位置，生成一个新的样式标签；
132.s73、将所述样式标签的所有内容粘贴到所述新的样式标签内。
133.在本发明实施例中，需要说明的是，由于vue组件的样式内容，都是编写在文件内部的样式标签(style标签)内的，而在原生组件中，是编写在template模板标签中，放置在tempalte模板标签内部的顶层，因此，在将vue组件的样式代码编译成原生组件适用的语法时，首先需要查找所述vue组件内部的样式标签，然后复制所述样式标签的所有内容，再在粘贴了vue组件的页面展示模板标签(template模板标签)内的所有内容以及所述页面展示模板标签本身的第一文件中的页面展示模板标签内的顶层位置，生成一个新的样式标签；最后将所述样式标签的所有内容粘贴到所述新的样式标签内。
134.需要说明的是，原生组件的样式内容还可以是直接编写在原生组件定义的类中，全部以字符串的格式拼接，最后在页面渲染组件的时候，动态添加到html文件中。当原生组
件的样式内容是以这种方式编写时，也可以根据对应的方法对vue组件的样式内容进行编译。
135.相比于将样式内容直接编写在原生组件定义的类中，将样式内容编写在template模板标签中，放置在tempalte模板标签内部的顶层，可读性更强，具有语法高亮编辑的优势。
136.实施例二：
137.请参阅图8，本发明实施例提供一种将前端vue组件编译为原生组件的装置，包括：
138.获取模块1，用于获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；
139.查找模块2，用于根据所述vue组件地址查找对应的vue组件；
140.初始化模块3，用于基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；
141.编译模块4，用于基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及vue组件的样式代码编译成所述原生组件适用的语法。
142.在一个实施例中，所述初始化模块，包括：
143.第一创建单元，用于创建一个以html为扩展名的文件，得到第一文件；
144.第二创建单元，用于创建一个以js为扩展名且用于声明原生组件的类的文件，得到第二文件；
145.加载单元，用于将所述第二文件加载进所述第一文件中；
146.基础内容增加单元，用于向所述原生组件的类中增加基础内容，得到增加基础内容后的原生组件的类；其中，所述基础内容包括constructor函数，所述constructor函数用于获得继承类所有的静态属性和方法函数；
147.初始原生组件生成单元，用于基于所述vue组件的名称和所述增加基础内容后的原生组件的类，根据预设的定义方法生成初始原生组件。
148.在一个实施例中，所述编译模块包括：
149.复制单元，用于将所述vue组件的页面展示模板标签内的所有内容以及所述页面展示模板标签本身复制到所述第一文件中；
150.编译单元，用于根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译。
151.在一个实施例中，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
152.当在所述页面展示模板标签内查到@click关键字时，在所述@click所在标签上增加一个id属性；其中，若在所述页面展示模板标签内查到@click关键字，则认为所述页面展示模板绑定了点击事件；
153.在所述点击事件触发后，获取执行所述点击事件函数的方法名；
154.根据所述方法名查找得到所述方法对应的函数本体；
155.将所述函数本体复制到回调函数的内容中；
156.根据所述id属性，获取当前点击事件所在元素；
157.在所述constructor函数内，通过添加事件监听的方法给所述元素添加点击事件；
其中，所述点击事件触发时触发所述回调函数。
158.在一个实施例中，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
159.当在所述页面展示模板标签内查到v-for关键字时，获取所述v-for属性对应的属性值；所述属性值为数组类型的数据，所述数组类型的数据是一个变量的形式，表示通过遍历数组内所有元素并将每一个元素作为列表的一项；其中，若在所述页面展示模板标签内查到v-for关键字，则认为所述页面展示模板绑定了for循环标签；
160.在所述v-for属性所在标签的父级标签上增加一个id属性；
161.获取所述数组中每一元素展示的内容；
162.根据预设的规则，对每一元素展示的内容进行转换，得到转换后每一元素展示的内容；
163.在所述constructor函数内，以循环体循环的数据为所述数组、循环拼装的内容为所述转换后每一元素展示的内容生成一个for循环体，得到一列表；
164.根据所述id属性，查找父级元素，并将所述列表作为所述父级元素新的子元素。
165.在一个实施例中，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：
166.当在所述页面展示模板标签内查找到插值表达式，获取所述插值表达式内的变量以及所述变量的默认值；其中，若所述页面展示模板标签内查找到插值表达式，则认为所述页面展示模板绑定了插值表达式；
167.获取所述插值表达式内的变量以及所述变量的默认值；
168.将所述默认值复制到所述constructor函数内，作为所述原生组件初始化时定义的默认值；
169.通过所述变量查找得到包含所述变量的方法函数；
170.将所述方法函数复制到与所述constructor函数的同一个层级中，作为所述原生组件的静态方法函数。
171.在一个实施例中，所述基于所述初始原生组件，根据原生组件语法，将所述vue组件的样式代码编译成所述原生组件适用的语法，具体包括：
172.查找所述vue组件内部的样式标签，复制所述样式标签的所有内容；
173.在所述页面展示模板标签内的顶层位置，生成一个新的样式标签；
174.将所述样式标签的所有内容粘贴到所述新的样式标签内。
175.实施例三：
176.请参阅图9，本发明实施例还提供一种计算机设备，该计算机设备可以是服务器，其内部结构可以如图9所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于储存适用一种将前端vue组件编译为原生组件的方法等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种将前端vue组件编译为原生组件的方法，所述方法包括：获取配置文件；其中，
所述配置文件的配置内容包括至少一个vue组件地址；根据所述vue组件地址查找对应的vue组件；基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。
177.本发明实施例提供的一种将前端vue组件编译为原生组件的方法，通过智能识别现有vue组件(基于vue框架编写的组件)的语法，并按照原生组件的现有语法对其进行编译改造，使得现有的vue组件可以直接通过编译得到原生组件，如此，开发者在利用原生组件开发项目时，对同一功能无需再按照原生组件逻辑进行二次开发，从而节省了开发时间以及人力成本，提高了开发项目的开发效率。此外，通过将vue组件编译为原生组件可以使得小型项目摆脱框架的束缚，不再需要为了能够复用框架开发的组件而被迫牺牲用户的加载性能，从而减少了应用加载等待时间。另外，本发明实施例编译得到的原生组件由于是按照统一的编码风格和格式生成的，因此，对于框架项目的代码风格和格式的统一打下了良好的基础，后续如果需要在编译后生成的原生组件进行修改和开发，对于不同开发人员来说，降低了理解和阅读成本，可以实现快速迭代开发新功能。最后，由于本发明实施例能够根据指令自动将vue组件编译为原生组件，因此，开发者无需掌握太多的与框架语法相关的内容，从而降低小型项目开发门槛。
178.实施例四：
179.本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种将前端vue组件编译为原生组件的方法，包括：获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；根据所述vue组件地址查找对应的vue组件；基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。
180.上述执行的适用于一种将前端vue组件编译为原生组件的方法，通过智能识别现有vue组件(基于vue框架编写的组件)的语法，并按照原生组件的现有语法对其进行编译改造，使得现有的vue组件可以直接通过编译得到原生组件，如此，开发者在利用原生组件开发项目时，对同一功能无需再按照原生组件逻辑进行二次开发，从而节省了开发时间以及人力成本，提高了开发项目的开发效率。此外，通过将vue组件编译为原生组件可以使得小型项目摆脱框架的束缚，不再需要为了能够复用框架开发的组件而被迫牺牲用户的加载性能，从而减少了应用加载等待时间。另外，本发明实施例编译得到的原生组件由于是按照统一的编码风格和格式生成的，因此，对于框架项目的代码风格和格式的统一打下了良好的基础，后续如果需要在编译后生成的原生组件进行修改和开发，对于不同开发人员来说，降低了理解和阅读成本，可以实现快速迭代开发新功能。最后，由于本发明实施例能够根据指令自动将vue组件编译为原生组件，因此，开发者无需掌握太多的与框架语法相关的内容，从而降低小型项目开发门槛。
181.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可
包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(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)等。
182.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
183.以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。