[发明专利]基于web端的vue代码编辑方法、编辑器及终端设备

说明书

本申请公开了一种基于web端的vue代码编辑方法、编辑器及终端设备，所述编辑方法包括获取待编辑代码，并确定所述编辑代码对应的代码内容；截取所述代码内容中的模板内容以及脚本内容；将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。本申请截取代码内容中的模板内容以及脚本内容，并模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将待编辑代码中的数据信息显示于编辑页面上，从而实现了在web端对vue代码进行在线编辑，并且通过一个编辑器即可以编辑vue中的所有组件。

技术领域

本申请涉及编辑器技术领域，特别涉及一种基于web端的vue代码编辑方法、编辑器及终端设备。

背景技术

随着互联网的不断进步，根据框架不断兴起，例如，前端中的vue，react以及angular等等。各框架均设置有各种对应的编程语言，并且每种编程语言均需要代码编辑器进行编辑，这就需要开发各种编辑器以适应各框架。虽然支持各编程语言的代码编辑器越来越多，但是在网页使用vue框架时，需要通过多个编辑器分别编辑网页所需插件(例如，html，css以及javascript等)，然后将编辑得到的插件拼接后供浏览器执行，而无法通过一个编辑器实现网页端的vue的在线编辑。

因而现有技术还有待改进和提高。

发明内容

本申请要解决的技术问题在于，针对现有技术的不足，提供一种基于web端的vue代码编辑方法、编辑器及终端设备。

为了解决上述技术问题，本申请实施例第一方面提供了一种基于web端的vue代码编辑方法，所述编辑方法具体包括：

获取待编辑代码，并确定所述编辑代码对应的代码内容；

截取所述代码内容中的模板内容以及脚本内容；

将所述模板内容赋值给vue中的模板属性，将脚本内容赋值给vue中所述脚本内容对应的目标对象，以将所述脚本内容展示于编辑页面中。

所述基于web端的vue代码编辑方法，其中，所述获取待编辑代码，并确定该编辑代码对应的代码内容具体包括：

通过编辑页面接收待编辑代码；

运行接收大的待编辑代码以确定所述编辑代码对应的代码内容。

所述基于web端的vue代码编辑方法，其中，所述截取所述代码内容中的模板内容以及脚本内容具体为：

通过vue中的字符串截取函数，截取所述代码内容中的模板内容以及脚本内容。

所述基于web端的vue代码编辑方法，其中，所述将脚本内容赋值给vue中所述脚本内容对应的目标对象具体包括：

将所述脚本内容转换为键值对象；

遍历待编辑代码对应的组件中的对象以得到所述脚本内容对应的目标对象，并将所述键值对象赋值给所述目标对象。

所述基于web端的vue代码编辑方法，其中，所述获取待编辑代码，并确定所述编辑代码对应的代码内容之前，所述方法还包括：

控制所述web端装载Codemirror编辑器，并将所述Codemirror编辑器的核心配置包配置为全局变量。

所述基于web端的vue代码编辑方法，其中，所述将所述Codemirror编辑器的核心配置包配置为全局变量具体为：

通过vue中的入口文件引入Codemirror编辑器的核心配置，以使得Codemirror编辑器的核心配置被配置为全局变量。