CN113239672B - 目标文件编辑方法及装置、电子设备、存储介质 - Google Patents

Abstract

本公开提供了一种目标文件编辑方法及装置、电子设备、存储介质，涉及前端开发技术领域。该方法包括：获取输入的目标文件，并提供用于编辑目标文件的可视化编辑界面，可视化编辑界面包括组件添加功能；在触发组件添加功能时提供可复用组件标识列表，并确定在可复用组件标识列表中选择的可复用组件标识；下载可复用组件标识对应的可复用组件的源码信息，并获取可复用组件的组件注册信息；将源码信息添加到目标文件所处项目文件的同级目录，并根据组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行源码信息，实现可复用组件的复用。本公开能够以可视化的方式实现将可复用的组件一键添加到单文件组件中，提高前端开发效率。

Description

目标文件编辑方法及装置、电子设备、存储介质

技术领域

本公开涉及前端开发技术领域，具体而言，涉及一种目标文件编辑方法、目标文件编辑装置、电子设备以及计算机可读存储介质。

背景技术

随着互联网技术的飞速发展，前端开发技术(Front-end development)越来越得到人们的关注。前端开发是指创建网页(World Wide Web，WEB)页面或应用程序(Application，APP)等前端界面呈现给用户的过程，具体是通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

目前，相关的技术方案中，要么无法实现将可复用组件的源码一键添加到单文件组件(.vue文件)对应的项目文件中，导致仍需要开发人员手动复制粘贴，进而影响前端开发效率；要么相关的可视化搭建组件的方案中的功能较单一，如无法选择不同类型的组件库、无法实现对组件的复制或删除操作、无法选择生成的文件类型等功能，导致可视化搭建方案的灵活性较低，编辑效率低下。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开实施例的目的在于提供一种目标文件编辑方法、目标文件编辑装置、电子设备以及计算机可读存储介质，进而至少在一定程度上实现将可复用组件的源码信息一键添加到项目文件中，提高前端开发效率。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

根据本公开实施例的第一方面，提供了一种目标文件编辑方法，包括：获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

在本公开的一些示例实施例中，基于前述方案，所述目标文件是单文件组件。

在本公开的一些示例实施例中，基于前述方案，所述在触发所述组件添加功能时提供可复用组件列表，包括：确定所述目标文件的后缀名类型；若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。

在本公开的一些示例实施例中，基于前述方案，所述下载所述可复用组件标识对应的可复用组件的源码信息，包括：获取所述可复用组件对应的组件标识信息；根据所述组件标识信息从预构建的组件源码数据库中下载所述可复用组件对应的源码信息。

在本公开的一些示例实施例中，基于前述方案，所述根据所述组件注册信息对所述目标文件进行编辑，包括：确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。

在本公开的一些示例实施例中，基于前述方案，所述可视化编辑界面还包括文件编辑功能，所述方法还包括：在触发所述文件编辑功能时提供基础组件列表以及编辑区域；响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。

在本公开的一些示例实施例中，基于前述方案，所述方法还包括：提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。

在本公开的一些示例实施例中，基于前述方案，所述方法还包括：响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供所述至少一个基础组件的编辑控件，以通过所述编辑控件实现对所述至少一个基础组件的复制操作或者删除操作。

在本公开的一些示例实施例中，基于前述方案，所述根据所述组件代码数据生成目标文件，包括：触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。

在本公开的一些示例实施例中，基于前述方案，所述可视化编辑界面还包括预览控件，所述方法还包括：在触发所述预览控件时，调整所述编辑区域的背景色，以实现当前编辑的基础组件的即时展示预览效果。

根据本公开实施例的第二方面，提供了一种目标文件编辑装置，包括：目标文件获取模块，用于获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；可复用组件选择模块，用于在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；源码信息添加模块，用于下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；目标文件编辑模块，用于将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

在本公开的一种示例性实施例中，基于前述方案，所述目标文件是单文件组件。

在本公开的一种示例性实施例中，基于前述方案，所述可复用组件选择模块包括单文件组件类型确定单元，所述单文件组件类型确定单元可以用于：确定所述目标文件的后缀名类型；若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。

在本公开的一种示例性实施例中，基于前述方案，所述源码添加模块包括源码信息下载单元，所述源码信息下载单元可以用于：获取所述可复用组件对应的组件标识信息；根据所述组件标识信息从预构建的组建源码数据库中下载所述可复用组件对应的源码信息。

在本公开的一种示例性实施例中，基于前述方案，所述源码添加模块还可以用于：确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。

在本公开的一种示例性实施例中，基于前述方案，所述目标文件编辑装置还包括文件编辑模块，所述文件编辑模块可以包括：基础组件列表提供单元，用于在触发所述文件编辑功能时提供基础组件列表以及编辑区域；属性数据编辑单元，用于响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；目标文件生成单元，用于根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。

在本公开的一种示例性实施例中，基于前述方案，所述基础组件列表提供单元包括组件库选择子单元，所述组件库选择子单元可以用于：提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括基础组件编辑单元，所述基础组件编辑单元可以用于：响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供所述至少一个基础组件的编辑控件，以通过所述编辑控件实现对所述至少一个基础组件的复制操作或者删除操作。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括待生成文件类型选择单元，所述待生成文件类型选择单元可以用于：触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括预览单元，所述预览单元可以用于：在触发所述预览控件时，调整所述编辑区域的背景色，以实现当前编辑的基础组件的即时展示预览效果。

根据本公开实施例的第三方面，提供了一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现上述任意一项所述的目标文件编辑方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的目标文件编辑方法。

本公开实施例提供的技术方案可以包括以下有益效果：

本公开的示例实施例中的目标文件编辑方法，获取输入的目标文件，并提供用于编辑目标文件的可视化编辑界面，该可视化编辑界面包括组件添加功能；在触发组件添加功能时提供可复用组件标识列表，并确定在可复用组件标识列表中选择的可复用组件标识；下载所述可复用组件标识对应的可复用组件的源码信息，并获取可复用组件的组件注册信息；将源码信息添加到目标文件所处项目文件的同级目录，并根据组件注册信息对目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现可复用组件的复用。一方面，通过提供的可视化编辑界面实现对目标文件的编辑，不仅能够有效提升目标文件的编辑效率，而且能够降低编辑难度，提升开发效率；另一方面，通过组件添加功能提供的可复用组件标识列表实现可复用组件的快速添加，不需要通过手动的方式编辑可复用组件，仅需要通过可视化编辑界面选择期望添加的可复用组件标识即可完成将该可复用组件的源码信息添加到项目文件并将组件注册信息自动写入到目标文件中，进一步降低目标文件的编辑效率，同时也能够实现多种组件的复用，提升组件的复用率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示意性示出了根据本公开的一些实施例的目标文件编辑方法的流程图；

图2示意性示出了根据本公开的一些实施例的筛选输入的目标文件的流程图；

图3示意性示出了根据本公开的一些实施例的添加源码信息到目标文件的流程图；

图4示意性示出了根据本公开的一些实施例的可视化编辑界面对应组件添加功能的应用界面示意图；

图5示意性示出了根据本公开的一些实施例的将可复用组件添加到目标文件的流程图；

图6示意性示出了根据本公开的一些实施例的基于基础组件编辑目标文件的流程图；

图7示意性示出了根据本公开的一些实施例的组件库切换的流程图；

图8示意性示出了根据本公开的一些实施例的可视化编辑界面对应文件编辑功能的应用界面示意图；

图9示意性示出了根据本公开的一些实施例的目标文件编辑装置的示意图；

图10示意性示出了根据本公开的一些实施例的电子设备的计算机系统的结构示意图；

图11示意性示出了根据本公开的一些实施例的计算机可读存储介质的示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本公开的各方面。

此外，附图仅为示意性图解，并非一定是按比例绘制。附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在本示例实施例中，首先提供了一种目标文件编辑方法，该目标文件编辑方法可以应用于终端设备，例如手机、电脑等电子设备。图1示意性示出了根据本公开的一些实施例的目标文件编辑方法流程的示意图。参考图1所示，该目标文件编辑方法可以包括以下步骤：

步骤S110，获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；

步骤S120，在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；

步骤S130，下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；

步骤S140，将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

根据本示例实施例中的目标文件编辑方法，一方面，通过提供的可视化编辑界面实现对目标文件的编辑，不仅能够有效提升目标文件的编辑效率，而且能够降低编辑难度，提升开发效率；另一方面，通过组件添加功能提供的可复用组件标识列表实现可复用组件的快速添加，不需要通过手动的方式编辑可复用组件，仅需要通过可视化编辑界面选择期望添加的可复用组件标识即可完成将该可复用组件的源码信息添加到项目文件并将组件注册信息自动写入到目标文件中，进一步降低目标文件的编辑效率，同时也能够实现多种组件的复用，提升组件的复用率。

下面，将对本示例实施例中的目标文件编辑方法进行进一步的说明。

在步骤S110中，获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能。

本公开的一个示例实施例中，目标文件可以是指前端开发中用于定义全局组件的文件，例如，目标文件可以包括但不限于单文件组件(vue文件)，单文件组件是指将一个组件相关的html结构、css样式以及交互的JavaScript代码从html文件中剥离出来构成的一个文件，相当于单文件组件具有结构、表现和行为的完整功能，方便组件之间随意组合以及组件的复用，这种文件的后缀名类型为“.vue”。vue文件的文件结构包含template、script、style这三种类型的标签，分别代表了html、js、css，当然，目标文件也可以是其他的用于定义全局组件的文件，本示例实施例不以此为限。在一个项目文件中，用户可以通过对单文件组件的打开操作或者选择操作实现目标文件的输入。

组件添加功能是指可视化编辑界面中提供的用于将可复用组件添加到目标文件中的功能模块，例如，可以在可视化编辑界面中提供组件添加功能对应的选项，在选择该选项时，可视化编辑界面可以提供用于将可复用组件添加到目标文件的交互界面，该交互界面可以浏览可复用组件的样式、相关信息，并通过选择操作将可复用组件添加编辑到目标文件中，当然，此处仅是示意性举例说明，本示例实施例不以此为限。

在步骤S120中，在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识。

本公开的一个示例实施例中，可复用组件是指结合前端项目提取出的可以重复利用的业务组件，例如，可复用组件可以是表格组件或者表单组件，也可以是弹框组件或者分页组件，当然，还可以是其他能够在不同的前端项目重复利用的其他组件，例如可以是弹窗报错组件“404”，本示例实施例对此不作特殊限定。

可复用组件标识列表是指预先提取出的可复用组件标识构成的列表，可以以多种方式在可视化编辑界面中进行展示，例如，可复用组件标识可以是可复用组件的样式缩略图，则可复用组件列表可以是以缩略图的形式展示不同的可复用组件的列表；可复用组件标识也可以是组件名称，则可复用组件列表也可以是通过组件名称结合简介数据构成的列表，本示例实施例对可复用组件列表的表现形式不做特殊限定。

用户可以通过可复用组件标识列表快速筛选期望复用的组件，并在选定可复用组件标识后，提供与该可复用组件相关的信息供用户进行详细查看，例如，假设可复用组件标识可以是可复用组件的样式缩略图，用户在该可复用组件的样式缩略图列表中，选定“404”组件的样式缩略图，然后系统展开显示该“404”组件的简介数据、预览图、组件名、组件类型等信息，并提供与“404”组件的样式缩略图对应的相关功能，如添加功能、查看源码功能、网页中查看预览效果功能等，以使用户能够选择到合适的可复用组件，提高前端开发效率。

在步骤S130中，下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息。

本公开的一个示例实施例中，源码信息是指用于实现可复用组件的功能的源代码，组件注册信息可以是在单文件组件中实现可复用组件注册的相关信息，例如，组件注册信息可以包括可复用组件的标签信息、导入信息、注册代码等信息，在目标文件中写入可复用组件的组件注册信息是为了调用该可复用组件，标签信息就是要调用组件的，而确定标签信息的来源，就需要导入信息，而从哪个路径下哪个文件，就需要要注册代码进行注册后才能使用。

步骤S140，将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

在完成一个前端项目之后，可以提取出其中可以在不同项目中重复利用的可复用组件，并将该可复用组件对应的源码信息上传到npm仓库，并按照自定义物料开发方式将可复用组件转换成json文件进行存储，然后可以根据不同的组件类型编辑好该组件对应的组件注册信息并存储。在使用时，则可以在构建好的npm仓库下载可复用组件对应的物料信息并根据物料信息得到源码信息，并获取可复用组件的组件注册信息，进而可以将源码信息添加到目标文件所处的项目文件的同级目录中，并将组件注册信息自动写入到目标文件中。

其中，在将所述源码信息添加到所述目标文件所处项目文件的同级目录时，可以在目标文件对应的项目文件中构建可复用组件的项目文件夹，该项目文件夹与目标文件为同级目录，并将该下载的源码信息自适应添加到可复用组件的项目文件夹，以实现可复用组件的源码信息的一键添加。然后将组件注册信息中包含的可复用组件的标签信息、导入信息和注册代码添加到目标文件，自动化安装组件运行所需要的依赖，确保运行成功。最终，通过项目文件夹中的源码信息以及添加了可复用组件的标签信息、导入信息和注册代码的目标文件调用并运行可复用组件的源码信息，实现可复用组件的功能。

下面，对步骤S110至步骤S130进行详细说明。

本公开的一个示例实施例中，可以在触发组件添加功能之前，先确定目标文件是否为支持的文件，避免编辑不支持的目标文件而导致编辑失败的情况，降低输入错误，提升开发效率。参考图2所示，具体可以包括：

步骤S210，确定所述目标文件的后缀名类型；

步骤S220，若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；

步骤S230，若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。

其中，后缀名类型是指用于标记文件类型的文件扩展名，根据后缀名类型能够快速准确判断目标文件是否是支持的文件类型，提升目标文件的文件类型的辨别效率。单文件组件类型即后缀名为“.vue”的目标文件。

在确定目标文件的后缀名类型为单文件组件类型，即判定目标文件是单文件组件时，可以直接提供可复用组件列表，以便于用户通过提供的可复用组件列表快速选择合适的可复用组件添加编辑到目标文件中。在确定目标文件的后缀名类型不是单文件组件类型，即判定目标文件不是单文件组件，或者没有检测到输入的目标文件时，则可以认为无法实现可复用组件的添加编辑，因此需要生成提示信息，该提示信息用于提示用户重新输入单文件组件类型的文件，例如，提示信息可以是“打开组件列表面板失败，请先打开一个vue文件”，当然，此处仅是示意性举例说明，本示例实施例不以此为限。

本公开的一个示例实施例中，由于预先构建的源码数据库中可能存在多个可复用组件的信息，因此需要快速找到用户选择的可复用组件的方式，以提高可复用组件的源码信息的下载或者请求效率，提升目标文件的编辑效率。

在本示例实施例中，可以先获取可复用组件对应的组件标识信息；然后可以根据该组件标识信息从预构建的组件源码数据库中下载可复用组件对应的源码信息。其中，组件源码数据库是指用于存储可复用组件的源码信息的数据库，例如，组件源码数据库可以是npm库，在完成一个前端项目之后，可以提取出其中可以在不同项目中重复利用的可复用组件，并将该可复用组件对应的源码信息上传到npm仓库进行存储，得到构建好的组件源码数据库。

组件标识信息是指可复用组件对应的唯一标识，例如，组件标识信息可以是可复用组件的组件名，也可以是可复用组件存储时对应的ID(Identity document)编码，本示例实施例对此不做特殊限定。

通过组件标识信息可以在组件源码数据库快速查找到可复用组件对应的源码信息，提高可复用组件的源码信息的下载效率，进一步提高目标文件的编辑效率。

在下载得到可复用组件的源码信息之后，可以先调用工具函数压缩文件以获取其路径，然后在解压文件并下载。在下载完成之后可以将可复用组件的源码信息通过Node.js创建成文件夹、文件，并将之前下载的临时路径中的文件夹复制到当前vue文件的同级目录的components文件夹中。特别的，如果用户多次添加同一可复用组件，那么在添加源码文件夹到同级目录的components文件夹中时会先遍历components文件夹中是否已存在该组件名，如果已存在该组件名，为了避免可能出现的冲突问题，可以给后续添加的源码文件夹名进行重命名处理，例如，可以给新添加的源码文件夹名依次累加1，实现源码文件夹的重命名处理，减少可能出现的冲突问题。

本公开的一个示例实施例中，可以通过图3中的步骤实现将源码信息添加到目标文件，参考图3所示，具体可以包括：

步骤S310，确定所述目标文件对应的文件结构；

步骤S320，基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；

步骤S330，根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。

其中，文件结构是指在目标文件是单文件组件(vue文件)时，template、script、style标签在vue文件中的分布情况，例如，vue文件的文件结构可以是空文件、有template标签但没有script标签、没有template标签有script标签、有有template标签且有script标签等不同的情况，本示例实施例对目标文件的文件结构不做特殊限定。

在vue文件的源码信息中焦点位置插入对应的组件标签，并根据目标文件的文件结构，将import引入和组件注册代码插入相应位置。

举例而言，在vue文件的文件结构为空文件时，可以初始化vue代码的基本结构，并在template标签部分插入“<组件标签名>”，script标签部分插入“import组件名from组件路径”，并添加组件注册“components:{组件名}”；

在vue文件的文件结构为template标签没有script标签时，可以分为两种情况：第一种，只有template标签，且在一行，此时如果template标签在一行，则可以表明template标签中无任何内容，因此组件标签名需要插入到“<template>”和“</template>”之间，即“<template>组件标签名</template>”，要解析vue文件内容，获取到template行的索引，从而确定插入位置和内容；第二种：template标签分行，且不需要关注是否有内容，如果template标签分行，那么只要在点击位置插入组件标签名即可，点击位置也就是光标位置，可以直接获取到，根据VS Code API的回调函数确定插入位置，将内容写入；

在vue文件的文件结构为有template标签有script标签时，可以分为两种情况：第一种，script标签在同一行，如果script标签在同一行表明script中无任何内容，进而可以计算出script行索引，确认插入位置是script标签中间；第二种，script标签不在同一行，此时如果没有export default，需要增加内容不仅仅是components里面的内容，还需要将export default及components补全；如果有export default，则根据export default形式，判断是否有内容，计算出行索引后，如果在同一行添加换行符在代码中，如果发生换行，插入位置为索引加1，且不需要加换行符；如果没有components，则需要获取到exportdefault行的位置后，通过索引加1得到components的插入位置，并添加换行符，插入components及组件部分代码；如果有components则需要判断components中是否有内容，“components{}：”以及“components{}，…”的情况则加换行符，并获取到components行索引后加1的位置为插入位置，“components{…”的情况则不需要加换行符，可以直接获取到索引后加1的位置确定为插入位置；

在vue文件的文件结构为没有template标签有script标签时，Script部分主要添加的是import行及export default中的components部分内容，script部分的具体处理同有template标签有script标签中的插入位置。

图4示意性示出了根据本公开的一些实施例的可视化编辑界面对应组件添加功能的应用界面示意图。

参考图4所示，可视化编辑界面410可以包括组件添加功能对应的选项控件420，通过组件添加功能对应的选项控件420可以展开用于一键添加可复用组件到目标文件的编辑界面。

该编辑界面可以包括可复用组件列表430，其中提供预先设置的多个可复用组件，可以通过缩略图的形式展示多个可复用组件，当然，也可以通过其他形式展示多个可复用组件，如组件名结合简介信息的形式展示多个可复用组件，本示例实施例对此不做特殊限定。

添加按钮440可以用于将选中的可复用组件对应的源码信息添加到目标文件中，预览按钮450用于通过a标签跳转到相应的在线链接实现目标文件的预览，源码按钮460用于转入可复用组件源码库展示可复用组件的源码信息，筛选控件470用于快速筛选符合条件的可复用组件。

图5示意性示出了根据本公开的一些实施例的将可复用组件添加到目标文件的流程图。

参考图5所示，步骤S501，触发组件添加功能。用户可以通过可视化编辑界面中提供的组件添加功能的选项触发组件添加功能；

步骤S502，判断输入的目标文件是否为vue文件，如果是则执行步骤S503，否则执行步骤504；

步骤S503，可以在VS Code编辑器区域提供组件库即提供可复用组件标识列表，并在选择源码按钮时执行步骤S505，在选择预览按钮时执行S506；

步骤S504，提示信息：需要打开vue文件；

步骤S505，转入可复用组件代码库；

步骤S506，转入网页链接进行预览；

步骤S507，确定选中的可复用组件标识，下载可复用组件标识对应的可复用组件的源码信息并安装其相关依赖，安装相关依赖时执行步骤S508，下载源码信息时执行步骤S509；

步骤S508，读取项目中的package.json文件，获取使用已添加组件时package.json文件中没有的依赖，调用终端执行intall操作；

步骤S509，根据组件库传递参数获取压缩文件路径，随后解压文件并进行下载，在插入组件标签时执行步骤S510，在添加组件源码时执行步骤S511；

步骤S510，读取vue文件内容，获取点击插入的光标位置(行、列)，插入组件标签，分别获取关键字符script以及components位置，将引入、注册组件代码插入相应的位置；

步骤S511，将组件源码复制到当前文件同级目录components文件夹中。

本公开的另一个示例实施例中，可视化编辑界面还可以包括文件编辑功能，可以通过可视化编辑界面提供的多个基础组件完成一个新的目标文件的创建，通过该文件编辑功能能够快速实现从无到有构建目标文件，提升新的目标文件的编辑效率，缩短前端开发周期，提升前端开发效率。

具体的，可以通过图6中的步骤实现通过基础组件拼装得到信息的目标文件，参考图6所示，具体可以包括：

步骤S610，在触发所述文件编辑功能时提供基础组件列表以及编辑区域；

步骤S620，响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；

步骤S630，根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。

其中，文件编辑功能是指可视化编辑界面中提供的用于将至少一个基础组件瓶装得到新的目标文件的功能模块，例如，可以在可视化编辑界面中提供文件编辑功能对应的选项，在选择该选项时，可视化编辑界面可以提供用于拼装目标文件的交互界面，该交互界面可以包含组件库切换控件、基础组件列表展示区域、页面编辑区域、组件属性编辑表格等模块，可以实现将至少一个基础组件添加编辑拼装到目标文件中，实现新的目标文件的构建。

编辑区域是指可视化编辑界面对应的文件编辑功能提供的、用于实时浏览构建的各基础组件样式、位置的区域，用于可以通过将基础组件列表中的至少一个基础组件拖动到编辑区域，实现将至少一个组件编辑添加到新建的目标文件中。

属性编辑表格是指可视化编辑界面对应的文件编辑功能提供的、用于编辑选中的基础组件的表格，例如，用户可以将基础组件列表中的选择性组件如“下拉选择组件”拖动到编辑区域，此时，在可视化编辑界面可以显示该“下拉选择组件”的属性编辑表格，属性编辑表格可以包括字段名、标题、选项、组件宽度、图标等可编辑字段，用户在属性编辑表格中填入相关信息后，可以得到该“下拉选择组件”对应的属性数据，这样，在生成组件代码时，将属性数据按照该基础组件的代码结构填入即可得到实现该“下拉选择组件”的功能的完整源代码，进而构建得到目标文件。

组件代码数据是指将拖动到编辑区域的至少一个基础组件以及基础组件的属性数据进行转换得到实现各基础组件功能的源代码。在用户通过拖动基础组件、基础组件的属性编辑等编辑操作之后，可以将编辑区域中显示的基础组件以及各基础组件的属性数据转换成完整的vue代码，进而通过该vue代码构建目标文件。

在本示例实施例中，在用户选择文件编辑功能的选项之后，还可以通过图7中的步骤实现组件库的切换，参考图5所示，具体可以包括：

步骤S710，提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；

步骤S720，响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；

步骤S730，根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。

其中，组件库选择控件是指用于选择预设的不同风格类型的组件库的控件，例如，组件库选择控件可以是下拉选择控件，也可以是列表控件，本示例实施例对此不做特殊限定。通过选择的组件库类型，可以快速切换不同组件风格的基础组件列表，相比于相关技术方案中基于一种UI组件库构成，设置不同的组件库类型能够满足不同前端开发项目的需求，不需要手动进行开发，进一步提升前端开发效率，提升基础组件的多样性，提升前端开发的灵活性以及适用范围。

在用户切换选择组件库即基础组件列表时，可以获取组件库的详细参数，调用node终端安装组件库依赖。具体的实现方式可以是针对不同类型的组件库设置不同的图标、文档地址的参数配置，并可以根据选中参数切换使用选择的组件库的相应配置文件，从而达到切换选项组件库的切换。

在本示例实施例中，为了更加便于开发人员编辑基础组件，可以在响应将基础组件列表中的至少一个基础组件拖动到编辑区域中，提供至少一个基础组件的编辑控件，用户可以通过该编辑控件实现对至少一个基础组件的复制操作或者删除操作。具体可以给拖拽到编辑区域的基础组件增加复制、删除按钮事件，触发复制、删除按钮时新增、删除对应的dom结构，这种操作类似快捷键，使用更加方便。

通过提供编辑控件，用户可以对基础组件进行复制操作或者删除操作，提升基础组件的拼装效率，提升目标文件的编辑效率。

在本示例实施例中，可以在触发文件编辑完成命令时，提供待生成文件类型；待生成文件类型可以包括页面文件类型和弹窗文件类型；基于组件代码数据生成与页面文件类型或者弹窗文件类型对应的目标文件。

具体的，在用户按照需求将选择的基础组件拖动到编辑区域之后，可以触发新建按钮，增加弹框面板供用户选择生成的目标文件的文件类型，如页面文件类型或弹窗文件类型，并随机生成目标文件的文件名并支持用户重新编辑。生成代码的本质就是简单的字符串拼接，可以分别拼接出html、css、js三种类型的代码再进行组装，最后生成vue代码，弹窗文件类型对应的弹框面板中添加确定按钮事件，可以获取到类型和文件名参数，并将文件添加到指令路径下。

在本示例实施例中，可以在可视化编辑界面提供预览控件，并在触发预览控件时，可以通过调整编辑区域的背景色实现当前编辑的基础组件的即时展示预览效果。具体的，可以通过开关的形式标记是否使用浏览器进行展示预览功能，预览控件中开标记true，关标记false。使用此功能时，主要时通过添加和移除class来切换编辑区域的背景色，实现即时展示预览的效果。

图8示意性示出了根据本公开的一些实施例的可视化编辑界面对应文件编辑功能的应用界面示意图。

参考图8所示，可视化编辑界面810中就可以包括文件编辑功能对应的选项控件820，通过文件编辑功能对应的选项控件820可以展开用于根据至少一个基础组件拼装得到目标文件的编辑界面。

该编辑界面可以包括组件库类型选择控件830，用户可以通过组件库类型选择控件830选择不同的组件库类型，不同的组件库对应不同的基础组件列表840；

可以提供编辑区域850，并在将目标组件如密码输入组件860拖动到编辑区域850时，显示密码输入组件860对应的属性编辑表格870，属性编辑表格870用于根据用户的输入生成密码输入组件860对应的属性信息；

可以在编辑密码输入组件860时，给该组件提供编辑控件880，用户可以通过编辑控件880快速实现对密码输入组件860的复制操作以及删除操作。

可以提供浏览器预览控件890，并在用户触发浏览器预览控件890时，生成当前编辑的至少一个基础组件对应的目标页面，并在用户触发完成新建按钮801时，提供文件类型选择弹窗，用于选择生成的目标文件的文件类型，文件类型可以包括弹窗文件类型和页面文件类型。

需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种目标文件编辑装置。参照图9所示，该目标文件编辑装置900包括：目标文件获取模块910、可复用组件选择模块920、源码信息添加模块930以及目标文件编辑模块940。其中：

目标文件获取模块910用于获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；

可复用组件选择模块920用于在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；

源码信息添加模块930用于下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；

目标文件编辑模块940用于将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

在本公开的一种示例性实施例中，基于前述方案，所述可复用组件选择模块920包括单文件组件类型确定单元，所述单文件组件类型确定单元可以用于：

确定所述目标文件的后缀名类型；

若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；

若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。

在本公开的一种示例性实施例中，基于前述方案，所述源码信息添加模块930包括源码信息下载单元，所述源码信息下载单元可以用于：

获取所述可复用组件对应的组件标识信息；

根据所述组件标识信息从预构建的组建源码数据库中下载所述可复用组件对应的源码信息。

在本公开的一种示例性实施例中，基于前述方案，所述源码信息添加模块930还可以用于：

确定所述目标文件对应的文件结构；

基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；

根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。

在本公开的一种示例性实施例中，基于前述方案，所述目标文件编辑装置900还包括文件编辑模块，所述文件编辑模块可以包括：

基础组件列表提供单元，用于在触发所述文件编辑功能时提供基础组件列表以及编辑区域；

属性数据编辑单元，用于响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；

目标文件生成单元，用于根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。

在本公开的一种示例性实施例中，基于前述方案，所述基础组件列表提供单元包括组件库选择子单元，所述组件库选择子单元可以用于：

提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；

响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；

根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括基础组件编辑单元，所述基础组件编辑单元可以用于：

响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供所述至少一个基础组件的编辑控件，以通过所述编辑控件实现对所述至少一个基础组件的复制操作或者删除操作。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括待生成文件类型选择单元，所述待生成文件类型选择单元可以用于：

触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；

基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。

在本公开的一种示例性实施例中，基于前述方案，所述文件编辑模块还包括预览单元，所述预览单元可以用于：

在触发所述预览控件时，调整所述编辑区域的背景色，以实现当前编辑的基础组件的即时展示预览效果。

上述中目标文件编辑装置各模块的具体细节已经在对应的目标文件编辑方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了目标文件编辑装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述目标文件编辑方法的电子设备。

所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图10来描述根据本公开的这种实施例的电子设备1000。图10所示的电子设备1000仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图10所示，电子设备1000以通用计算设备的形式表现。电子设备1000的组件可以包括但不限于：上述至少一个处理单元1010、上述至少一个存储单元1020、连接不同系统组件(包括存储单元1020和处理单元1010)的总线1030、显示单元1040。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元1010执行，使得所述处理单元1010执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施例的步骤。例如，所述处理单元1010可以执行如图1中所示的步骤S110，获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；步骤S120，在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；步骤S130，下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；步骤S140，将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。

存储单元1020可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)1021和/或高速缓存存储单元1022，还可以进一步包括只读存储单元(ROM)1023。

存储单元1020还可以包括具有一组(至少一个)程序模块1025的程序/实用工具1024，这样的程序模块1025包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线1030可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备1000也可以与一个或多个外部设备1070(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备1000交互的设备通信，和/或与使得该电子设备1000能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1050进行。并且，电子设备1000还可以通过网络适配器1060与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1060通过总线1030与电子设备1000的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1000使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施例的步骤。

参考图11所示，描述了根据本公开的实施例的用于实现上述目标文件编辑方法的程序产品1100，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本公开示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本公开实施例的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种目标文件编辑方法，其特征在于，包括：

获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能以及文件编辑功能；

在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；

下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；

将所述源码信息添加到所述目标文件所处项目文件的同级目录，并确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件，根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码；

所述方法还包括：

在触发所述文件编辑功能时提供基础组件列表以及编辑区域；

响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；

根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。

2.根据权利要求1所述的目标文件编辑方法，其特征在于，所述目标文件是单文件组件。

3.根据权利要求2所述的目标文件编辑方法，其特征在于，所述在触发所述组件添加功能时提供可复用组件列表，包括：

确定所述目标文件的后缀名类型；

若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；

若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。

4.根据权利要求1所述的目标文件编辑方法，其特征在于，所述下载所述可复用组件标识对应的可复用组件的源码信息，包括：

获取所述可复用组件对应的组件标识信息；

根据所述组件标识信息从预构建的组件源码数据库中下载所述可复用组件对应的源码信息。

5.根据权利要求1所述的目标文件编辑方法，其特征在于，所述方法还包括：

提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；

响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；

根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。

6.根据权利要求1所述的目标文件编辑方法，其特征在于，所述方法还包括：

响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供所述至少一个基础组件的编辑控件，以通过所述编辑控件实现对所述至少一个基础组件的复制操作或者删除操作。

7.根据权利要求1所述的目标文件编辑方法，其特征在于，所述可视化编辑界面还包括预览控件，所述方法还包括：

在触发所述预览控件时，调整所述编辑区域的背景色，以实现当前编辑的基础组件的即时展示预览效果。

8.一种目标文件编辑装置，其特征在于，包括：

目标文件获取模块，用于获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能以及文件编辑功能；

可复用组件选择模块，用于在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；

源码信息添加模块，用于下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；

目标文件编辑模块，用于将所述源码信息添加到所述目标文件所处项目文件的同级目录，并确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件，根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码；

所述目标文件编辑装置还包括文件编辑模块，所述文件编辑模块包括：

基础组件列表提供单元，用于在触发所述文件编辑功能时提供基础组件列表以及编辑区域；

属性数据编辑单元，用于响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；

目标文件生成单元，用于根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。

9.一种电子设备，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如权利要求1至7中任一项所述的目标文件编辑方法。

10.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的目标文件编辑方法。