System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() vue组件转换方法、装置、电子设备和计算机可读介质制造方法及图纸_技高网

vue组件转换方法、装置、电子设备和计算机可读介质制造方法及图纸

技术编号:40969262 阅读:2 留言:0更新日期:2024-04-18 20:50
本发明专利技术公开了vue组件转换方法、装置、电子设备和计算机可读介质,涉及组件开发技术领域。该方法包括:通过解析器读取待转换的vue组件的入口文件;读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件;根据低代码平台提供的组件开发标准,将所述js对象中的属性和事件转换成可拖曳组件对应的配置文件;将所述配置文件打包成数据包,并将所述数据包上传至所述低代码平台。该实施方式能够解决组件二次开发的开发成本较大的技术问题。

【技术实现步骤摘要】

本专利技术涉及组件开发,尤其涉及一种vue组件转换方法、装置、电子设备和计算机可读介质


技术介绍

1、低代码平台是信息技术行业在以降低企业开发成本为目标的不断探索的过程中出现的一个产物,其通过零代码或少量代码的方式,以拖拽可视化的形式为主,使得不懂代码但精通业务的业务人员可以去按需去构建页面,使得一个平台或者应用的开发成本、开发门槛、沟通成本都显著降低,有助于缩短开发周期,具有部署简单、运维方便的优势。

2、其中,二开组件是低代码平台除了初始内置组件外,后续扩展的二次开发组件,通常会有一个二开组件的脚手架专门用于开发符合平台规范的组件。二开组件通常以数据包的形式通过接口上传到低代码平台上,经由低代码平台解析,生成所需的组件数据,然后参与到页面的构建以及后续的使用中,比如构建流程、部署应用。

3、对于一些其他团队或个人开发的vue组件库,低代码平台想要集成到自己的系统中,最常见的方案就是提供平台相应的组件开发标准,让开发人员学习组件开发标准后,按照组件开发标准重新开发一个能在低代码平台使用的相同功能的组件,组件开发标准包括但不限制于组件文件的目录结构、文件内容的格式以及代码的写法等。

4、在实现本专利技术过程中,专利技术人发现现有技术中至少存在如下问题:

5、(1)不同团队、不同开发人员的习惯不同,导致形成的vue组件代码具体实现风格不同、个性化强的特点,依次进行二次开发的成本较大。

6、(2)对于已经稳定的有自己规范的组件库,想要批量集成到低代码平台依旧要每次设计相应的转化规范,导致沟通和设计成本较高。

7、(3)对于开发人员重新开发二开组件的常规方案,存在了一定的学习成本,平台规范越细致成本越大,而且每个开发人员都要学习,导致开发成本较大。


技术实现思路

1、有鉴于此,本专利技术实施例提供一种vue组件转换方法、装置、电子设备和计算机可读介质,以解决组件二次开发的开发成本较大的技术问题。

2、为实现上述目的,根据本专利技术实施例的一个方面,提供了一种vue组件转换方法,包括:

3、通过解析器读取待转换的vue组件的入口文件;

4、读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件;其中,所述入口文件与所述各个依赖文件之间通过标签进行引用,和/或,所述各个依赖文件之间通过标签进行引用;

5、根据低代码平台提供的组件开发标准,将所述js对象中的属性和事件转换成可拖曳组件对应的配置文件,所述配置文件包括所述可拖曳组件的属性和事件;

6、将所述配置文件打包成数据包,并将所述数据包上传至所述低代码平台。

7、可选地,读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件,包括:

8、识别所述入口文件的文件类型;

9、若所述入口文件的文件类型为vue文件,则读取所述入口文件中的script标签,判断所述script标签中是否引用了依赖文件;若是,则读取所述依赖文件中的文件内容,并将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述script标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件;

10、若所述入口文件的文件类型为js文件,则采用编译器将所述入口文件的文件内容编译为js文件并读取所述js文件中的js对象,并识别出所述js对象中的属性和事件。

11、可选地,读取所述依赖文件中的文件内容,并将所述文件内容转换为js对象,包括:

12、识别所述依赖文件的文件类型;

13、若所述依赖文件的文件类型为vue文件,则读取所述依赖文件中的script标签,判断所述script标签中是否引用了依赖文件;若是,则读取所述依赖文件中的文件内容,并将所述文件内容转换为js对象;若否,则将所述script标签中的字符串转换成js对象;

14、若所述依赖文件的文件类型为js文件,则采用编译器将所述依赖文件的文件内容编译为js文件并读取所述js文件中的js对象。

15、可选地,采用编译器将所述入口文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

16、读取所述入口文件中的script标签,判断所述script标签中是否引用了依赖文件;若是,则读取所述依赖文件中的文件内容,并采用编译器将所述文件内容编译为js文件并读取所述js文件中的js对象;若否,则采用编译器将所述入口文件中的文件内容编译为js文件并读取所述js文件中的js对象。

17、可选地,采用编译器将所述依赖文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

18、读取所述依赖文件中的script标签,判断所述script标签中是否引用了依赖文件;若是,则读取所述依赖文件中的文件内容,并采用编译器将所述文件内容编译为js文件并读取所述js文件中的js对象;若否,则采用编译器将所述依赖文件中的文件内容编译为js文件并读取所述js文件中的js对象。

19、可选地,所述编译器为babel.js或者swc.js。

20、可选地,通过解析器读取待转换的vue组件的入口文件,包括:

21、通过node.js读取待转换的vue组件的入口文件。

22、另外,根据本专利技术实施例的另一个方面,提供了一种vue组件转换装置,包括:

23、第一读取模块,用于通过解析器读取待转换的vue组件的入口文件;

24、第二读取模块,用于读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件;其中,所述入口文件与所述各个依赖文件之间通过标签进行引用,和/或,所述各个依赖文件之间通过标签进行引用;

25、转换模块,用于根据低代码平台提供的组件开发标准,将所述js对象中的属性和事件转换成可拖曳组件对应的配置文件,所述配置文件包括所述可拖曳组件的属性和事件;

26、上传模块,用于将所述配置文件打包成数据包,并将所述数据包上传至所述低代码平台。

27、可选地,所述第二读取模块还用于:

28、识别所述入口文件的文件类型;

29、若所述入口文件的文件类型为vue文件,则读取所述入口文件中的script标签,判断所本文档来自技高网...

【技术保护点】

1.一种vue组件转换方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件,包括:

3.根据权利要求2所述的方法,其特征在于,读取所述依赖文件中的文件内容,并将所述文件内容转换为js对象,包括:

4.根据权利要求2所述的方法,其特征在于,采用编译器将所述入口文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

5.根据权利要求4所述的方法,其特征在于,采用编译器将所述依赖文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

6.根据权利要求4或5所述的方法,其特征在于,所述编译器为babel.js或者swc.js。

7.根据权利要求1所述的方法,其特征在于,通过解析器读取待转换的vue组件的入口文件,包括:

8.一种vue组件转换装置,其特征在于,包括:

9.根据权利要求8所述的装置,其特征在于,所述第二读取模块还用于:

10.根据权利要求9所述的装置,其特征在于,所述第二读取模块还用于:

11.根据权利要求9所述的装置,其特征在于,所述第二读取模块还用于:

12.根据权利要求11所述的装置,其特征在于,所述第二读取模块还用于:

13.根据权利要求11或12所述的装置,其特征在于,所述编译器为babel.js或者swc.js。

14.根据权利要求8所述的装置,其特征在于,所述第一读取模块还用于:

15.一种电子设备,其特征在于,包括:

16.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。

17.一种计算机程序产品,包括计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的方法。

...

【技术特征摘要】

1.一种vue组件转换方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,读取所述入口文件中的标签,判断所述标签中是否引用了依赖文件,若是,则读取所述依赖文件中的文件内容,将所述文件内容转换为js对象,并识别出所述js对象中的属性和事件;若否,则将所述标签中的字符串转换成js对象,并识别出所述js对象中的属性和事件,包括:

3.根据权利要求2所述的方法,其特征在于,读取所述依赖文件中的文件内容,并将所述文件内容转换为js对象,包括:

4.根据权利要求2所述的方法,其特征在于,采用编译器将所述入口文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

5.根据权利要求4所述的方法,其特征在于,采用编译器将所述依赖文件的文件内容编译为js文件并读取所述js文件中的js对象,包括:

6.根据权利要求4或5所述的方法,其特征在于,所述编译器为babel.js或者swc.js。

7.根据权利要求1所述的方法,其特征在于,通过解析器读取待...

【专利技术属性】
技术研发人员:孟飞宇梁锐刘婧申冠豪李卓
申请(专利权)人:中国建设银行股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1