CN115543316A - 一种基于vue的UI库组件效果实时显示方法、装置及应用 - Google Patents

Abstract

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

Description

一种基于vue的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组件，并将其在网页上进行效果显示。

第二方面，本申请实施例提供了一种基于vue的UI库组件效果实时显示工具，包括代码编辑器、效果展示框，用户在所述代码编辑器中输入代码，输入代码使用实施例一的方法进行处理后，将代码效果在所述效果展示框中进行实时展示。

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

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

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

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

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

第四方面，本申请实施例提供了一种一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以一种基于vue的UI库组件效果实时显示方法或一种基于vue的UI库组件效果实时显示工具。

第五方面，本申请实施例提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括一种基于vue的UI库组件效果实时显示方法或一种基于vue的UI库组件效果实时显示工具。

本发明的主要贡献和创新点如下：

本申请实施例可以对输入代码进行自动解析，识别其中的UI组件标签，并通过所述UI组件标签对UI组件库进行连接，在对UI组件库进行连接后，通过挂载的方式将输入代码的效果实时的显示在页面中，可以实时解析UI组件库的组件代码并进行展示。

同时，开发者可以在线对代码进行更改，且对代码进行更改时可以将更改后代码的效果进行实时显示，本方案提出的一种基于vue的UI库组件效果实时显示方法可以在不刷新浏览器的情况下通过解析输入代码实现组件代码与组件效果之间的转换，并没有使用浏览器行为，且不受限于项目资源，可以从任意组件库中进行组件调用，具有跨平台性，且本方案所使用的代码编辑器提供部分代码高亮显示和代码错误提示功能，从而保证代码正确，提高了开发者的开发效率。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的一种基于vue的UI库组件效果实时显示方法方法的流程图；

图2是根据本申请实施例的一种基于vue的UI库组件效果实时显示方法的流程图；

图3是根据本申请实施例的一种UI组件库处理方法示意图；

图4是根据本申请实施例的一种对输入代码进行处理的流程示意图；

图5是根据本申请实施例的一种基于vue的UI库组件效果实时显示工具的结构图；

图6是使用基于vue的UI库组件效果实时显示工具的使用流程图；

图7是根据本申请实施例的一种基于vue的UI库组件效果实时显示装置的结构框图；

图8是根据本申请实施例的电子装置的硬件结构示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

为了方面理解本方案，对本方案中提到的术语在此进行说明：

Vue：是一套用于构建用户界面的渐进式框架；

@vue/compiler-sfc：一种将单文件组件预编译为标准的JavaScript和css的工具；

UI组件库：基于vue的组件库，可用于快速开发和构建网站。

实施例一

本申请实施例提供了一种基于vue的UI库组件效果实时显示方法，可以实现在修改代码时，将UI库中的组件效果实时显示到同一页面中，具体地，参考图1，所述方法包括：

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

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

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

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

在一具体实施例中，所述基于vue的UI库组件效果实时显示方法的流程图如图2所示，本方案适用于由template、style、script组成的vue单文件组件的代码的处理，且UI组件库只能通过VUE开发得到。

具体的，所述字符串解析工具只能用于处理有template部分代码、style部分代码和script部分代码组成的vue单文件组件。

在一些实施例中，在“通过所述UI组件标签与对应的UI组件库建立连接”步骤中，对所述UI组件标签进行库名匹配到对应的UI组件库，并返回所述UI组件库所在的UI组件库地址，再将所述UI组件库地址包装成请求链接***到网页中以完成连接，所述UI组件标签包含UI组件库名称。

在本方案中，使用UI组件库安装工具对所述UI组件标签进行库名匹配到对应的UI组件库，并返回所述UI组件库所在的UI组件库地址；使用UI组件库导入工具将所述UI组件库地址包装成请求链接***到网页中以完成连接，所述UI组件库安装工具包括了UI组件标签中的每一UI组件库名称与对应的UI组件库的映射关系。

示例性的，所述UI组件标签可以有两种形态，一种是以“-”分割的标签代码，如“el-message”，另一种是以驼峰形式命名的标签代码，如“ELMessage”。

进一步的，在“将所述UI组件库地址包装成请求链接***到网页中以完成连接”步骤中，将所述UI组件库地址进行拼接，得到可发起浏览器资源加载请求的请求链接，将所述请求链接以脚本的形式***到网页文档的页眉标签中，并将所述UI组件标签对应的UI组件的样式文件引入到所述网页文档中。

具体的，所述UI组件标签对应的UI组件的样式文件为控制UI组件库中的组件在网页上显示样式的文件，由UI组件库提供。

具体的，将所述可发起浏览器资源加载请求的链接以script脚本的形式通过javascript脚本提供的api接口***到网页文档的页眉标签中。

示例性的，所述UI组件库处理方法如图3所示，先使用所述UI组件标签识别工具对template、script、style三个部分代码进行识别，再通过所述UI组件库安装工具对识别得到的UI组件标签进行库名匹配，最后使用所述UI组件库导入工具对所述UI组件库地址进行拼接，得到可发起浏览器资源加载请求的链接。

在一些实施例中，在“使用字符串代码解析工具将所述代码拆分为template、script、style三个部分的代码字符串”步骤中，所述style部分代码包含style标签内容，所述script部分代码中包含相关事件代码，所述template部分代码中包含样式代码与UI组件标签字符串。

具体的，所述style标签内容为用来代表所述页面的样式说明，所述script部分代码为JavaScript格式代码，所述JavaScript格式代码中包含事件代码，所述事件代码用来表示页面中发生的事件，所述template部分代码中的UI组件库标签字符串中包含UI组件库名称，用来对对应的UI组件库中的UI组件进行调用，所述template部分代码中的样式代码用来对style标签内容进行具体细化，。

示例性的，所述style标签内容用来表示页面采用蓝色正方形或者红色正方形，所述UI组件标签用来对Vuetify组件库中的组件进行调用，并决定template部分代码以何种形式渲染并展示在页面上，所述样式代码用来决定所述蓝色正方形的大小，旋转角度，所述事件代码用来决定当页面中使用鼠标点击按钮，或者使用滚轮滑动页面时应该出现怎样的效果。

在一些实施例中，所述模板解析方法接收template部分代码作为参数，返回带有render函数的函数文本，所述脚本解析方法接收script部分代码，返回带有script函数的函数文本，所述样式解析方法接收style部分代码，返回包含UI组件样式的字符串。

具体的，所述模板解析方法、脚本解析方法、样式解析方法都以compileStyle方法为核心，所述compileStyle方法有vue框架核心编译插件@vue/compiler-sfc提供，用来对所述template部分代码、script部分代码、style部分代码进行编译。

示例性的，所述模板解析方法对template部分代码中的样式代码和UI库组件标签字符串进行解析，得到带有render函数的函数文本，所述样式代码和UI库组件标签字符串即为在页面上进行渲染展示的html标签；所述脚本解析方法对所述script部分代码中的JavaScript格式代码进行解析，提取JavaScript格式代码中事件代码，并将所述事件代码包装成一个script函数文本，将所述script函数文本作为解析结果；所述样式解析方法对所述style部分代码中的style标签内容进行解析，得到JavaScript代码。

在一些实施例中，所述createAPP方法接收所述模板解析代码、脚本解析代码、样式解析代码，并将所述模板解析代码和所述脚本解析代码转换为可执行的JavaScript代码，将所述模板解析代码、脚本解析代码、样式解析代码传递给createAPP方法，所述createAPP方法将所述模板解析代码、脚本解析代码、样式解析代码进行合并得到挂载显示代码，并将页面id作为参数传入到所述挂载显示代码的mount函数中，对所述挂载显示代码中mount函数进行调用，根据所述mount函数中的页面id将页面效果显示在对应的网页上。

具体的，如图4所示，先通过所述字符串代码解析工具将所述代码输入拆分为template、script、style三个部分代码，再通过模板解析工具、脚本解析工具和样式解析工具分别对template、script、style三个部分代码进行解析，最后通过createAPP方法在页面上进行挂载。

具体的，所述createAPP方法由vue框架提供，所述createAPP方法接收的模板解析代码为带有render函数的函数文本，接收的脚本解析代码为带有script函数的函数文本，接收的样式解析代码为JavaScript文本，所述模板解析代码和所述脚本解析代码通过调用JavaScript的eval函数将其转换为可执行的JavaScript代码后，将所述模板解析代码、脚本解析代码和样式解析代码进行合并，得到挂载显示代码。

具体的，所述样式解析代码通过JavaScript在所述页面文档中创建style标签，并将所述样式解析代码***到创建的style标签中进行渲染展示。

具体的，所述页面id为需要进行渲染的页面的标识。

实施例二

基于实施例一提出的一种基于vue的UI库组件效果实时显示方法，本申请还提出一种基于vue的UI库组件效果实时显示工具，如图5所示，包括代码编辑器、效果展示框，用户在所述代码编辑器中输入代码，输入代码使用实施例一的方法进行处理后，将代码效果在所述效果展示框中进行实时展示。

具体的，代码效果在所述效果展示框中进行实时展示的方法与实施例一相同，在此不在赘述。

在一些实施例中，所述基于vue的UI库组件效果实时显示工具的应用***架构图如图所述，所述基于vue的UI库组件效果实时显示工具在浏览器101的web页面102上运行，当用户在所述代码编辑器104中输入代码时，代码效果在所述效果展示框103中进行实时显示。

具体的，如图6所示，在所述代码编辑器中添加代码纠错组件，所述代码纠错组件可以对所述代码编辑器中的vue代码错误进行提示，并对vue代码中的语法进行高亮显示，以方便用户对代码进行更改。

实施例三

基于相同的构思，参考图7，本申请还提出了一种数据入库装置，包括：

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

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

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

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

实施例四

本实施例还提供了一种电子装置，参考图8，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

具体地，上述处理器402可以包括中央处理器(CPU)，或者特定集成电路(ApplicationSpecificIntegratedCircuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(HardDiskDrive，简称为HDD)、软盘驱动器、固态驱动器(SolidStateDrive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(UniversalSerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(Non-Volatile)存储器。在特定实施例中，存储器404包括只读存储器(Read-OnlyMemory，简称为ROM)和随机存取存储器(RandomAccessMemory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(ProgrammableRead-OnlyMemory，简称为PROM)、可擦除PROM(ErasableProgrammableRead-OnlyMemory，简称为EPROM)、电可擦除PROM(ElectricallyErasableProgrammableRead-OnlyMemory，简称为EEPROM)、电可改写ROM(ElectricallyAlterableRead-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(StaticRandom-AccessMemory，简称为SRAM)或动态随机存取存储器(DynamicRandomAccessMemory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器404(FastPageModeDynamicRandomAccessMemory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(ExtendedDateOutDynamicRandomAccessMemory，简称为EDODRAM)、同步动态随机存取内存(SynchronousDynamicRandom-AccessMemory，简称SDRAM)等。

存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。

处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的一种基于vue的UI库组件效果实时显示方法。

可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。

传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是用户的代码输入等，输出的信息可以是代码显示结果等。

可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：

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

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

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

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

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、***、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。

本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图8中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如DVD及其数据变体、CD等光学介质上。物理介质是非瞬态介质。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

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所述的方法进行处理后，将代码效果在所述效果展示框中进行实时展示。

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

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

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

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

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

9.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行权利要求1-6任一所述的一种基于vue的UI库组件效果实时显示方法或权利要求7所述的一种基于vue的UI库组件效果实时显示工具。

10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据权利要求1-6任一所述的一种基于vue的UI库组件效果实时显示方法或权利要求7所述的一种基于vue的UI库组件效果实时显示工具。

Images