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

权利要求书

1.一种基于vue的UI库组件效果实时显示方法，其特征在于，包括：

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

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

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

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

2.根据权利要求1所述的一种基于vue的UI库组件效果实时显示方法，其特征在于，在“通过所述UI组件标签将template、script、style三个部分的代码字符串与对应的UI组件库建立连接”步骤中，对所述UI组件标签进行库名匹配到对应的UI组件库，并返回所述UI组件库所在的UI组件库地址，再将所述UI组件库地址包装成请求链接插入到网页中以完成连接，所述UI组件标签包含UI组件库名称。

3.根据权利要求2所述的一种基于vue的UI库组件效果实时显示方法，其特征在于，在“将所述UI组件库地址包装成请求链接插入到网页中以完成连接”步骤中，将所述UI组件库地址进行拼接，得到可发起浏览器资源加载请求的请求链接，将所述请求链接以脚本的形式插入到网页文档的页眉标签中，并将所述UI组件标签对应的UI组件的样式文件引入到所述网页文档中。

4.根据权利要求1所述的一种基于vue的UI库组件效果实时显示方法，其特征在于，在“使用字符串代码解析工具将所述代码拆分为template、script、style三个部分的代码字符串”步骤中，所述style部分代码包含style标签内容，所述script部分代码中包含相关事件代码，所述template部分代码中包含样式代码与UI组件标签字符串。

5.根据权利要求1所述的一种基于vue的UI库组件效果实时显示方法，其特征在于，所述模板解析方法接收template部分代码作为参数，返回带有render函数的函数文本，所述脚本解析方法接收script部分代码，返回带有script函数的函数文本，所述样式解析方法接收style部分代码，返回包含UI组件样式的字符串。

6.根据权利要求1所述的一种基于vue的UI库组件效果实时显示方法，其特征在于，所述createAPP方法接收所述模板解析代码、脚本解析代码、样式解析代码，并将所述模板解析代码和所述脚本解析代码转换为可执行的JavaScript代码，将所述模板解析代码、脚本解析代码、样式解析代码传递给createAPP方法，所述createAPP方法将所述模板解析代码、脚本解析代码、样式解析代码进行合并得到挂载显示代码，并将页面id作为参数传入到所述挂载显示代码的mount函数中，对所述挂载显示代码中mount函数进行调用，根据所述mount函数中的页面id将页面效果显示在对应的网页上。

7.一种基于vue的UI库组件效果实时显示工具，包括代码编辑器、效果展示框，用户在所述代码编辑器中输入代码，输入代码使用权利要求1-6所述的方法进行处理后，将代码效果在所述效果展示框中进行实时展示。