【技术实现步骤摘要】
将前端vue组件编译为原生组件的方法、装置、设备及介质
[0001]本专利技术涉及计算机
，尤其涉及一种将前端vue组件编译为原生组件的方法、装置、设备及介质。
技术介绍
[0002]目前前端领域内，大部分项目的开发都是使用框架进行组件式开发，常见的框架主要有vue，框架的开发主要作用是能够给开发者带来语法上编写的便利，简化开发者自行开发打包构建等内容。但是，并不是所有的项目都适合通过框架进行开发，特别是对于一些小型的项目来说，原因有以下几点：
[0003](1)引入框架进行开发，反而增加开发者需要进行项目初始化框架搭建的工序，也使得开发者需要掌握框架语法相关的内容；
[0004](2)由于框架代码库本身具备一定的资源体积，当用户在弱网环境下，会增加应用加载等待时间；
[0005](3)通过框架语法开发的代码最后也是通过浏览器编译解析成原生语言，才可以正常运行的，浏览器解析也需要耗费时间，增加用户打开页面等待时长。
[0006]为了适配这些小型项目的需求，前端的JavaScript语言已...
【技术保护点】
【技术特征摘要】
1.一种将前端vue组件编译为原生组件的方法，其特征在于，包括：获取配置文件；其中，所述配置文件的配置内容包括至少一个vue组件地址；根据所述vue组件地址查找对应的vue组件；基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件；基于所述初始原生组件，根据原生组件语法，将所述vue组件的页面展示模板代码以及所述vue组件的样式代码编译成所述原生组件适用的语法。2.根据权利要求1所述的将前端vue组件编译为原生组件的方法，其特征在于，所述基于所述vue组件的名称，初始化原生组件内容，得到初始原生组件，包括：创建一个以所述vue组件的名称为文件名且以html为扩展名的文件，得到第一文件；创建一个以js为扩展名且用于声明原生组件的类的文件，得到第二文件；将所述第二文件加载进所述第一文件中；向所述原生组件的类中增加基础内容，得到增加基础内容后的原生组件的类；其中，所述基础内容包括constructor函数，所述constructor函数用于获得继承类所有的静态属性和方法函数；基于所述vue组件的名称和所述增加基础内容后的原生组件的类，根据预设的定义方法生成初始原生组件。3.根据权利要求2所述的将前端vue组件编译为原生组件的方法，其特征在于，所述基于所述初始原生组件，根据原生组件的语法，将所述vue组件的页面展示模板代码编译成原生组件适用的语法，包括：将所述vue组件的页面展示模板标签内的所有内容以及所述页面展示模板标签本身复制到所述第一文件中；根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译。4.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：当在所述页面展示模板标签内查到@click关键字时，在所述@click所在标签上增加一个id属性；其中，若在所述页面展示模板标签内查到@click关键字，则认为所述页面展示模板绑定了点击事件；在所述点击事件触发后，获取执行所述点击事件函数的方法名；根据所述方法名查找得到所述方法对应的函数本体；将所述函数本体复制到回调函数的内容中；根据所述id属性，获取所述点击事件所在元素；在所述constructor函数内，通过添加事件监听的方法给所述元素添加点击事件；其中，所述点击事件触发时触发所述回调函数。5.根据权利要求3所述的将前端vue组件编译为原生组件的方法，其特征在于，所述根据所述页面展示模板所绑定的对象，基于所述初始原生组件，采用原生组件语法中对应的方法进行编译，具体包括：当在所述页面展示模板标签内查到v
‑
for关键字时，获取所述v
‑
for属性对应的...
【专利技术属性】
技术研发人员：黄康，
申请(专利权)人：平安普惠企业管理有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。