一种VUE页面编辑方法、系统以及计算机可读存储介质技术方案

本发明专利技术公开了一种VUE页面编辑方法、系统以及计算机可读存储介质，方法包括：获取VUE控件调用指令，将预先定义好的VUE控件属性输出到可视化编辑器中，以提供可视化编辑页面供开发人员对控件进行可视化编辑并生成相应的JSON文件；获取VUE源码转换指令，通过源码转换引擎将JSON文件转换成标准的VUE源码文件，并将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑；获取指令，通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，并将JSON文件中的控件重新输出到可视化编辑器中，本发明专利技术实现了VUE页面可视化编辑，提升了前端开发的编码效率。的编码效率。的编码效率。

【技术实现步骤摘要】
一种VUE页面编辑方法、系统以及计算机可读存储介质


[0001]本专利技术涉及前端网页设计领域，尤其涉及一种VUE页面编辑方法、系统以及计算机可读存储介质。

技术介绍

[0002]随着前端技术的发展，VUE这种前端框架已经成为目前主流的技术框架之一，它有着开发效率高，运行效率高的优点，他的语法简介，易于学习。现有技术中，一般是通过VUE语言或其他前端语言实现Web应用或移动端应用的UI布局，此种方法效率较低、软件交付时间长、人力成本高。

技术实现思路

[0003]本专利技术要解决的技术问题在于，针对现有技术的效率较低、软件交付时间长、人力成本高的问题，提供一种VUE页面编辑方法、系统以及计算机可读存储介质，以更进一步提升开发人员的开发效率和降低软件开发人力成本。
[0004]本专利技术解决其技术问题所采用的技术方案是：构造一种VUE页面编辑方法，所述方法包括：
[0005]获取到开发人员输入的VUE控件调用指令，将预先定义好的VUE控件属性输出到可视化编辑器中，以提供可视化编辑页面供开发人员对控件进行可视化编辑并生成相应的JSON文件；
[0006]获取到开发人员输入的VUE源码转换指令，通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，并将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑；
[0007]获取到开发人员输入的JSON转换指令，通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，并将JSON文件中的控件重新输出到可视化编辑器中。
[0008]优选地，所述的将预先定义好的VUE控件属性输出到可视化编辑器中，包括：将预先定义好的VUE控件属性通过render函数输出到可视化编辑器中。
[0009]优选地，所述的通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，包括：所述源码转换引擎对JSON文件进行翻译，生成VUE版本的html、js、css三部分代码。
[0010]优选地，所述的将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑，包括：将源码转换引擎输出的VUE源码文件输出到源码编辑器中，源码编辑器采用monaco
‑
editor加载生成的控件源码，并提供在线编译功能和实时预览功能，通过monaco
‑
editor编辑后保存成VUE源码文件。
[0011]优选地，所述的通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，包括：
[0012]遍历VUE源码文件中的html中的控件及其属性，将控件及其属性保存成JSON文件；
[0013]分析VUE源码文件中的JS代码，将JS方法进行提炼保存到JSON文件中；
[0014]分析VUE源码文件中的CSS代码，将CSS代码保存到JSON文件中。
[0015]本专利技术另一方面还构造了一种VUE页面编辑系统，所述系统包括：
[0016]控件调用模块，用于获取到开发人员输入的VUE控件调用指令，将预先定义好的VUE控件属性输出到可视化编辑器中，以提供可视化编辑页面供开发人员对控件进行可视化编辑并生成相应的JSON文件；
[0017]VUE源码转换模块，用于在获取到开发人员输入的VUE源码转换指令时，通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，并将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑；
[0018]JSON转换模块，用于获取到开发人员输入的JSON转换指令，通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，并将JSON文件中的控件重新输出到可视化编辑器中。
[0019]优选地，所述VUE源码转换模块具体用于在获取到开发人员输入的VUE源码转换指令时，通过所述源码转换引擎对JSON文件进行翻译，生成VUE版本的html、js、css三部分代码，将源码转换引擎输出的VUE源码文件输出到源码编辑器中，源码编辑器采用monaco
‑
editor加载生成的控件源码，并提供在线编译功能和实时预览功能，通过monaco
‑
editor编辑后保存成VUE源码文件。
[0020]优选地，所述JSON转换模块具体用于遍历VUE源码文件中的html中的控件及其属性，将控件及其属性保存成JSON文件；分析VUE源码文件中的JS代码，将JS方法进行提炼保存到JSON文件中；分析VUE源码文件中的CSS代码，将CSS代码保存到JSON文件中；通过render函数将JSON文件中的控件重新输出到可视化编辑器中。
[0021]本专利技术另一方面还构造了一种VUE页面编辑系统，包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序被处理器执行时实现如前所述的方法的步骤。
[0022]本专利技术另一方面还构造了一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现如前所述的方法的步骤。
[0023]本专利技术的VUE页面编辑方法、系统以及计算机可读存储介质，具有以下有益效果：本专利技术实现了VUE页面可视化编辑，提升了前端开发的编码效率，而且实现了VUE代码在线编辑并切换回可视化编辑状态，提升了前端开发的调试效率。
附图说明
[0024]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图：
[0025]图1是本专利技术VUE页面编辑方法的流程图；
[0026]图2是本专利技术VUE页面编辑方法的逻辑示意图；
[0027]图3是控件可视化编辑时的效果图；
[0028]图4是控件运行时的效果图；
[0029]图5是源码编辑器效果图；
具体实施方式
[0030]为了便于理解本专利技术，下面将参照相关附图对本专利技术进行更全面的描述。附图中给出了本专利技术的典型实施例。但是，本专利技术可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本专利技术的公开内容更加透彻全面。
[0031]除非另有定义，本文所使用的所有的技术和科学术语与属于本专利技术的
的技术人员通常理解的含义相同。本文中在本专利技术的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本专利技术。
[0032]本专利技术总的思路是：将预先定义好的VUE控件属性输出到可视化编辑器中，因此开发人员可以对控件进行可视化编辑并生成相应的JSON文件，编辑完了之后，通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，并将源码转换引擎输出的VUE源码文件输出到源码编本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种VUE页面编辑方法，其特征在于，所述方法包括：获取到开发人员输入的VUE控件调用指令，将预先定义好的VUE控件属性输出到可视化编辑器中，以提供可视化编辑页面供开发人员对控件进行可视化编辑并生成相应的JSON文件；获取到开发人员输入的VUE源码转换指令，通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，并将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑；获取到开发人员输入的JSON转换指令，通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，并将JSON文件中的控件重新输出到可视化编辑器中。2.根据权利要求1所述的方法，其特征在于，所述的将预先定义好的VUE控件属性输出到可视化编辑器中，包括：将预先定义好的VUE控件属性通过render函数输出到可视化编辑器中。3.根据权利要求1所述的方法，其特征在于，所述的通过源码转换引擎将可视化编辑器生成的JSON文件转换成标准的VUE源码文件，包括：所述源码转换引擎对JSON文件进行翻译，生成VUE版本的html、js、css三部分代码。4.根据权利要求1所述的方法，其特征在于，所述的将源码转换引擎输出的VUE源码文件输出到源码编辑器中以便开发人员对VUE源码文件进行编辑，包括：将源码转换引擎输出的VUE源码文件输出到源码编辑器中，源码编辑器采用monaco
‑
editor加载生成的控件源码，并提供在线编译功能和实时预览功能，通过monaco
‑
editor编辑后保存成VUE源码文件。5.根据权利要求1所述的方法，其特征在于，所述的通过JSON转换引擎将源码编辑器输出的VUE源码文件恢复成JSON文件，包括：遍历VUE源码文件中的html中的控件及其属性，将控件及其属性保存成JSON文件；分析VUE源码文件中的JS代码，将JS方法进行提炼保存到JSON文件中；分析VUE源码文件中的CSS代码，将CSS代码保存到JSON文件中。6.一种VUE页面编辑系统，其特征在于，所述系统包括：控件调用模...

【专利技术属性】
技术研发人员：冯亮，
申请(专利权)人：深圳联友科技有限公司，
类型：发明
国别省市：