一种基于vue的html代码转换方法与流程

专利2026-05-11  9


本发明涉及web开发,尤其涉及一种基于vue的html代码转换方法。


背景技术:

1、随着web开发技术的不断发展,html作为网页的基础语言,其重要性不言而喻。然而,在项目整体过程中,开发者经常需要对ui设计出的页面进行频繁的修改和转换,以适应不同的需求和场景。现在是ui设计工具均可自动生成对应的html代码及css样式,开发人员需将html手动转换为vue开发语言,效率低下。因此,如何开发一种能够自动、高效地转换html代码的工具,成为当前前端技术领域亟待解决的问题。

2、现有技术中包括:html-to-vue可通过命令行的形式将html转为vue页面;vue-html-loader可在webpack加载器的帮助下将html文件内容转换成vue组件;vue-template-compiler可将字符串形式的html转换为vue文件。

3、现有技术均只可以转换简单的html文件内容,转换较为单一,无法将html转换为依赖组件库,如elementui的vue项目代码。且在转换时,操作复杂,无法批量转换。


技术实现思路

1、鉴于上述问题,提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种基于vue的html代码转换方法。

2、根据本发明的一个方面,提供了一种基于vue的html代码转换方法,所述代码转换方法包括:

3、分析html页面,将页面分为静态页面和动态页面;

4、将所述静态页面中的样式进行分类,定义组件边界,分析动态部分中的逻辑关系,针对动态方法定义相应规则;

5、将所述规则集成至规则展示区,对转换规则进行展示;

6、将所述规则按照统一的规范定义规则库;

7、导入项目,创建并绑定一个实例对象;

8、将html分解成一系列的标记,获得ast结构;

9、利用ejs、handlebars引擎库动态创建生成模板文件;

10、选择规则库,利用递归函数对ast结构进行遍历,生成相应的源代码;

11、对转换后的项目进行连通性测试,确认无问题,导出项目。

12、可选的,所述分析html页面,将页面分为静态页面和动态页面具体包括:

13、分析html页面,根据是否依赖于用户交互或服务器端处理将页面分为静态部分和动态部分。

14、可选的,所述将所述静态页面中的样式进行分类具体包括:基础样式、布局样式、组件样式、主题样式等,并定义对应的样式规则,包括嵌套不超过三层、变量定义规则、样式命名规则和css模块化规则。

15、可选的,所述定义组件边界,分析动态部分中的逻辑关系,针对动态方法定义相应规则包括:

16、定义组件边界,包括:组件的作用域范围、组件的输入输出规则、组件的命名规则、html标签与vue标签对应规则;

17、分析动态部分中的逻辑关系,包括:定义页面传参规则、页面路由模式规则;

18、针对动态方法定义相应规则,包括:字符串拼接、方法复用及嵌套规则、避免出现死循环、多使用js内置参数。

19、可选的,所述将所述规则按照统一的规范定义规则库具体包括:

20、遵循小驼峰命名方式、使用名称、先大后小规范,定义规则库,具体可分为为样式库、组件库、逻辑关系库及方法库,每个库内都包含对应的详细的规则。

21、可选的,所述将html分解成一系列的标记,获得ast结构具体包括:

22、将html分解成一系列的标记,包括属性名、文本节点;

23、识别开始标签和结束标签,并将对应的元素节点关联起来,组合成结构,对结构进行构建,形成ast结构。

24、可选的,所述利用ejs、handlebars引擎库动态创建生成模板文件具体包括:

25、利用ejs、handlebars引擎库动态创建生成vue、react、angular模板文件;

26、所述模板文件中包括父节点及子节点,以表示更细粒度的结构,组成模板文件库,供用户选择目标语言后,生成基础模板文件。

27、可选的,所述对转换后的项目进行连通性测试,确认无问题,导出项目具体包括:

28、对转换后的项目进行连通性测试,若测试有问题,选择是否打开编辑页面,对页面中有问题的地方进行针对性修改;

29、对修改完成后的项目,进行再次测试,若无问题,结束转换,并导出项目。

30、可选的,所述选择规则库,利用递归函数对ast结构进行遍历,生成相应的源代码具体包括:

31、选择规则库,利用递归函数对ast结构进行遍历,遍历到与规则库中规则对应的节点;

32、根据规则、节点的类型进行转换,生成相应的源代码。

33、本发明提供的一种基于vue的html代码转换方法,所述代码转换方法包括:分析html页面,将页面分为静态页面和动态页面;将所述静态页面中的样式进行分类,定义组件边界,分析动态部分中的逻辑关系,针对动态方法定义相应规则;将所述规则集成至规则展示区,对转换规则进行展示;将所述规则按照统一的规范定义规则库;导入项目,创建并绑定一个实例对象;将html分解成一系列的标记,获得ast结构;利用ejs、handlebars引擎库动态创建生成模板文件;选择规则库,利用递归函数对ast结构进行遍历,生成相应的源代码;对转换后的项目进行连通性测试,确认无问题,导出项目。实现对html代码的快速、高效转换,减少人工操作,提高开发效率。

34、上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。



技术特征:

1.一种基于vue的html代码转换方法,其特征在于,所述代码转换方法包括:

2.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述分析html页面,将页面分为静态页面和动态页面具体包括:

3.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述将所述静态页面中的样式进行分类具体包括:基础样式、布局样式、组件样式、主题样式等,并定义对应的样式规则,包括嵌套不超过三层、变量定义规则、样式命名规则和css模块化规则。

4.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述定义组件边界,分析动态部分中的逻辑关系,针对动态方法定义相应规则包括:

5.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述将所述规则按照统一的规范定义规则库具体包括:

6.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述将html分解成一系列的标记,获得ast结构具体包括:

7.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述利用ejs、handlebars引擎库动态创建生成模板文件具体包括:

8.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述对转换后的项目进行连通性测试,确认无问题,导出项目具体包括:

9.根据权利要求1所述的一种基于vue的html代码转换方法,其特征在于,所述选择规则库,利用递归函数对ast结构进行遍历,生成相应的源代码具体包括:


技术总结
本发明公开了一种基于vue的html代码转换方法,所述代码转换方法包括:分析HTML页面,将页面分为静态页面和动态页面;将所述静态页面中的样式进行分类,定义组件边界,分析动态部分中的逻辑关系,针对动态方法定义相应规则;将所述规则集成至规则展示区,对转换规则进行展示;将所述规则按照统一的规范定义规则库;导入项目,创建并绑定一个实例对象;将HTML分解成一系列的标记,获得AST结构;利用EJS、Handlebars引擎库动态创建生成模板文件;选择规则库,利用递归函数对AST结构进行遍历,生成相应的源代码;对转换后的项目进行连通性测试,确认无问题,导出项目。实现对HTML代码的快速、高效转换,减少人工操作,提高开发效率。

技术研发人员:信晓北
受保护的技术使用者:北银金融科技有限责任公司
技术研发日:
技术公布日:2024/12/17
转载请注明原文地址:https://xbbs.6miu.com/read-31009.html