一种VUE文件解析方法和装置制造方法及图纸

本发明专利技术提供了一种VUE文件解析方法和装置，涉及移动互联，该方法包括：获取VUE文件的文本值；将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；根据VUE可识别组件，对VUE文件进行解析。本发明专利技术在无法使用打包工具的情况下，在前后端不分离下获得完整的VUE组件化开发体验，赋予浏览器在前后端不分离下解析VUE文件的能力。的能力。的能力。

【技术实现步骤摘要】
一种VUE文件解析方法和装置


[0001]本专利技术涉及移动互联
，尤其涉及一种VUE文件解析方法和装置。

技术介绍

[0002]本部分旨在为权利要求书中陈述的本专利技术的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
[0003]VUE是一种用于构建用户界面的JavaScript框架，基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，实现开发用户界面的功能。VUE文件主要由模板(template)、脚本(script)、样式(style)三部分组成，打包工具可以由相关插件将该VUE文件解析成一个javascirpt函数，即浏览器可运行的文件。在无法使用打包工具的情况下，浏览器无法直接使用VUE文件。
[0004]在前后端不分离架构下，前端代码部署在后端框架中，页面使用服务端渲染引擎(如jsp、php、asp等)生成HTML代码返回给浏览器。出于架构限制，前端开发无法使用脚手架，因此部署无法使用打包工具，从而导致了无法解析VUE文件。
[0005]前端虽然可以在页面上通过引入VUE源文件使用相关功能，但是阉割了许多功能，比如无法使用VUE文件进行组件式开发。
[0006]另外，VUE提供了注册组件的方法，具体是在浏览器引入VUE源文件的情况下，可以使用VUE提供的注册组件的方法，该方法可传入组件名称和配置对象；但VUE文件的三部分内容(template、script、style)都是使用js编写，相比于VUE文件，不仅与原有js代码耦合在一起，而且开发、调试起来也十分困难。
[0007]因此，如何提供一种新的方案，其能够解决上述技术问题是本领域亟待解决的技术难题。

技术实现思路

[0008]本专利技术实施例提供一种VUE文件解析方法，在无法使用打包工具的情况下，在前后端不分离下获得完整的VUE组件化开发体验，赋予浏览器在前后端不分离下解析VUE文件的能力，该方法包括：
[0009]获取VUE文件的文本值；
[0010]将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；
[0011]解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；
[0012]根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；
[0013]根据VUE可识别组件，对VUE文件进行解析。
[0014]本专利技术实施例还提供一种VUE文件解析装置，包括：
[0015]文本值获取模块，用于获取VUE文件的文本值；
[0016]元素确定模块，用于将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚
本元素和样式元素；
[0017]元素解析模块，用于解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；
[0018]VUE可识别组件确定模块，用于根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；
[0019]VUE文件解析模块，用于根据VUE可识别组件，对VUE文件进行解析。
[0020]本专利技术实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述一种VUE文件解析方法。
[0021]本专利技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述一种VUE文件解析方法。
[0022]本专利技术实施例还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现上述一种VUE文件解析方法。
[0023]本专利技术实施例提供的一种VUE文件解析方法和装置，包括：获取VUE文件的文本值；将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；根据VUE可识别组件，对VUE文件进行解析。本专利技术在无法使用打包工具的情况下，在前后端不分离下获得完整的VUE组件化开发体验，赋予浏览器在前后端不分离下解析VUE文件的能力，解析后提供了VUE能够识别的组件，避免了在js文件中编写template及style，获得了VUE单文件的完整开发体验，提升了开发效率，通过组件化开发方式提高了项目可维护性。
附图说明
[0024]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
[0025]图1为本专利技术实施例一种VUE文件解析方法示意图。
[0026]图2为本专利技术实施例一种VUE文件解析方法的获取VUE文件的文本值过程示意图。
[0027]图3为本专利技术实施例一种VUE文件解析方法的确定模板元素、脚本元素和样式元素过程示意图。
[0028]图4为本专利技术实施例一种VUE文件解析方法的确定模板解析结果过程示意图。
[0029]图5为本专利技术实施例一种VUE文件解析方法的确定脚本解析结果过程示意图。
[0030]图6为本专利技术实施例一种VUE文件解析方法的流程图。
[0031]图7为运行本专利技术实施的一种VUE文件解析方法的计算机设备示意图。
[0032]图8为本专利技术实施例一种VUE文件解析装置示意图。
具体实施方式
[0033]为使本专利技术实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发
明实施例做进一步详细说明。在此，本专利技术的示意性实施例及其说明用于解释本专利技术，但并不作为对本专利技术的限定。
[0034]图1为本专利技术实施例一种VUE文件解析方法示意图，如图1所示，本专利技术实施例提供一种VUE文件解析方法，在无法使用打包工具的情况下，在前后端不分离下获得完整的VUE组件化开发体验，赋予浏览器在前后端不分离下解析VUE文件的能力，该方法包括：
[0035]步骤101：获取VUE文件的文本值；
[0036]步骤102：将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；
[0037]步骤103：解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；
[0038]步骤104：根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；
[0039]步骤105：根据VUE可识别组件，对VUE文件进行解析。
[0040]本专利技术实施例提供的一种VUE文件解析方法，包括：获取VUE文件的文本值；将VUE文件的文本值转换为节点，遍历节点确定模板元素本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种VUE文件解析方法，其特征在于，包括：获取VUE文件的文本值；将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；解析模板元素、脚本元素和样式元素，确定模板解析结果、脚本解析结果和样式解析结果；根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件；根据VUE可识别组件，对VUE文件进行解析。2.如权利要求1所述的方法，其特征在于，获取VUE文件的文本值，包括：接收VUE文件路径参数；所述VUE文件路径参数是VUE文件在服务器的存储地址；利用暴露加载文件方法，使用浏览器根据VUE文件路径参数访问VUE文件在服务器的存储地址以发送请求，将请求的返回类型设置为文本，获取VUE文件的文本值。3.如权利要求1所述的方法，其特征在于，将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素，包括：利用document.implementation.createHTMLDocument函数将VUE文件的文本值转换为节点；遍历节点，识别出模板子节点、脚本子节点和样式子节点；调用预设解析器将模板子节点、脚本子节点和样式子节点转换为模板元素、脚本元素和样式元素；所述模板元素、脚本元素和样式元素为可识别VUE组件。4.如权利要求3所述的方法，其特征在于，解析模板元素，确定模板解析结果，包括：解析模板元素，获取模板元素对应模板子节点的文本属性；将模板元素对应模板子节点的文本属性确定为模板解析结果。5.如权利要求4所述的方法，其特征在于，解析脚本元素，确定脚本解析结果，包括：将脚本元素的导出组件属性设定为统一变量；在预设解析器中设定自定义变量；所述自定义变量用于接收导出的对象；所述自定义变量的结构与统一变量的结构一致；将脚本元素的引入方法设定为暴露加载文件方法；将自定义变量对应的变量名、暴露加载文件方法对应的方法名和脚本元素对应的文本值传入浏览器的Function函数，按照设定为统一变量的导出组件属性，确定VUE组件属性；所述VUE组件属性，包括：数据，生命周期，监听器；所述浏览器的Function函数具备解析javascript文本和设置执行上下文的能力；将所述VUE组件属性确定为脚本解析结果。6.如权利要求1所述的方法，其特征在于，解析样式元素，确定样式解析结果，包括：将样式元素按照全局样式隔离的方式，插入HTML文件的头部标签，确定样式解析结果。7.如权利要求5所述的方法，其特征在于，根据模板解析结果、脚本解析结果和样式解析结果，确定VUE可识别组件，包括：将模板元素对应模板子节点的文本属性和样式解析结果整合至VUE组件属性中，按照暴露加载文件方法，确定VUE可识别组件。8.如权利要求7所述的方法，其特征在于，根据VUE可识别组件，对VUE文件进行解析，包括：
在实例化VUE对象时，调用暴露加载文件方法对VUE可识别组件进行加载，对VUE文件进行解析。9.如权利要求8所述的方法，其特征在于，还包括：对VUE文件的解析结果使用预设工具打包发布。10.一种VUE文件解析装置，其特征在于，包括：文本值获取模块，用于获取VUE文件的文本值；元素确定模块，用于将VUE文件的文本值转换为节点，遍历节点确定模板元素、脚本元素和样式元素；元素解析模块，用于解析模板元素、脚本元...

【专利技术属性】
技术研发人员：邓帅元，
申请(专利权)人：建信金融科技有限责任公司，
类型：发明
国别省市：