[发明专利]一种基于vue的UI库组件效果实时显示方法、装置及应用

说明书

本申请提出了一种基于vue的UI库组件效果实时显示方法、装置及应用，包括以下步骤：获取用户的代码输入，使用字符串代码解析工具对代码输入进行解析，并根据用户的代码输入连接对应的UI组件库，使用模板解析工具、脚本解析工具、样式解析工具对用户的代码输入进行解析，得到模板解析代码、脚本解析代码、样式解析代码；将所述模板解析代码、脚本解析代码、样式解析代码通过vue框架的createAPP方法进行合并，得到挂载显示代码，所述createAPP将所述挂载显示代码挂载到网页上进行效果显示。本方案可以根据输入代码查看UI组件的效果，并且在对代码进行修改时可以将修改后的效果实时的显示到页面中。

技术领域

本申请涉及前端技术领域，特别是涉及一种基于vue的UI库组件效果实时显示方法、装置及应用。

背景技术

随着web前端开发领域中，vue框架的不断升级和生态的不断丰富，开发者对于基于vue的UI框架有了更多的选择，但是因为不同UI框架的实现思路不一样，导致框架内组件的使用方式也变得千差万别，在没有一份详细的框架组件使用文档的前提下，开发者不得不花更多时间和精力在熟悉组件以及如何使用组件上。开发者的关注点也无法集中在业务功能实现上，对开发效率有着极大的影响。

目前虽然对多种组件框架的使用上已有现成的技术解决方案，比如vue sfcplayground，该方案的实现方法是通过在web端获取代码编辑框内输入vue代码，并用代码解析方法将代码解析成可被浏览器解析的代码，最后输出到页面上，从而实现了代码的在线编辑和实时效果展示，但是，该方案的在线编辑器只能解析在线编辑时产生的组件代码，无法解析UI组件库的组件代码，并且该方案的在线编辑器无法提供代码高亮和错误提示效果，这使得开发者在使用编辑器时还得将注意力放在如何保证代码正确上，大大降低了开发效率。

此外还有一种live server方法，该方法是通过websocker连接向浏览器发送刷新请求，使浏览器页面刷新，从而达到UI组件更新的目的，也就是说，live server利用的是浏览器行为重新加载资源，并且这个资源只能是当前项目已经存在的，并不能动态的从外部组件库中进行UI组件的加载。

综上所述，现亟需一种代码编辑器能够提供代码高亮和错误提示从而保证代码输入正确，能够解析基于vue的UI组件库代码的方法，且通过解析输入代码实现组件代码到组件效果的转换，且方案本身应该具有跨平台性。

发明内容

本申请实施例提供了一种基于vue的UI库组件效果实时显示方法、装置及应用，可以根据输入的UI组件代码实时的将UI组件效果在页面上进行展示。

第一方面，本申请实施例提供了一种基于vue的UI库组件效果实时显示方法，所述方法包括：

获取用户的代码，使用字符串代码解析工具将所述代码拆分为template、script、style三个部分的代码字符串；

使用UI组件标签识别工具分别对template部分的代码字符串进行识别，得到template部分的代码字符串中包含的UI组件标签，通过所述UI组件标签与对应的UI组件库建立连接；

使用模板解析工具对template部分的代码字符串中绑定的样式和事件进行解析，得到模板解析代码；使用脚本解析工具提取script部分的代码字符串中的相关UI组件库字符串，得到脚本解析代码；使用样式解析工具对style部分的代码字符串中的style标签内容进行转换，得到样式解析代码；

将所述模板解析代码、所述脚本解析代码、所述样式解析代码通过vue框架的createAPP方法进行合并得到挂载显示代码，通过所述createAPP将所述挂载显示代码挂载到网页上，再根据所述挂载显示代码中的UI组件标签调用对应UI组件库中的UI组件，并将其在网页上进行效果显示。