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

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

【技术实现步骤摘要】
目标文件编辑方法及装置、电子设备、存储介质
本公开涉及前端开发
，具体而言，涉及一种目标文件编辑方法、目标文件编辑装置、电子设备以及计算机可读存储介质。
技术介绍
随着互联网技术的飞速发展，前端开发技术(Front-enddevelopment)越来越得到人们的关注。前端开发是指创建网页(WorldWideWeb，WEB)页面或应用程序(Application，APP)等前端界面呈现给用户的过程，具体是通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。目前，相关的技术方案中，要么无法实现将可复用组件的源码一键添加到单文件组件(.vue文件)对应的项目文件中，导致仍需要开发人员手动复制粘贴，进而影响前端开发效率；要么相关的可视化搭建组件的方案中的功能较单一，如无法选择不同类型的组件库、无法实现对组件的复制或删除操作、无法选择生成的文件类型等功能，导致可视化搭建方案的灵活性较低，编辑效率低下。需要说明的是，在上述
技术介绍
部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
技术实现思路
本公开实施例的目的在于提供一种目标文件编辑方法、目标文件编辑装置、电子设备以及计算机可读存储介质，进而至少在一定程度上实现将可复用组件的源码信息一键添加到项目文件中，提高前端开发效率。本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。>根据本公开实施例的第一方面，提供了一种目标文件编辑方法，包括：获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。在本公开的一些示例实施例中，基于前述方案，所述目标文件是单文件组件。在本公开的一些示例实施例中，基于前述方案，所述在触发所述组件添加功能时提供可复用组件列表，包括：确定所述目标文件的后缀名类型；若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。在本公开的一些示例实施例中，基于前述方案，所述下载所述可复用组件标识对应的可复用组件的源码信息，包括：获取所述可复用组件对应的组件标识信息；根据所述组件标识信息从预构建的组件源码数据库中下载所述可复用组件对应的源码信息。在本公开的一些示例实施例中，基于前述方案，所述根据所述组件注册信息对所述目标文件进行编辑，包括：确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。在本公开的一些示例实施例中，基于前述方案，所述可视化编辑界面还包括文件编辑功能，所述方法还包括：在触发所述文件编辑功能时提供基础组件列表以及编辑区域；响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。在本公开的一些示例实施例中，基于前述方案，所述方法还包括：提供组件库选择控件，所述组件库选择控件用于选择不同类型的基础组件列表；响应于通过所述组件库选择控件将当前组件库类型切换为目标组件库类型，获取所述目标组件库类型对应的配置文件；根据所述配置文件生成与所述目标组件库类型对应的基础组件列表。在本公开的一些示例实施例中，基于前述方案，所述方法还包括：响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供所述至少一个基础组件的编辑控件，以通过所述编辑控件实现对所述至少一个基础组件的复制操作或者删除操作。在本公开的一些示例实施例中，基于前述方案，所述根据所述组件代码数据生成目标文件，包括：触发文件编辑完成命令时，提供待生成文件类型；所述待生成文件类型包括页面文件类型和弹窗文件类型；基于所述组件代码数据生成与所述页面文件类型或者所述弹窗文件类型对应的所述目标文件。在本公开的一些示例实施例中，基于前述方案，所述可视化编辑界面还包括预览控件，所述方法还包括：在触发所述预览控件时，调整所述编辑区域的背景色，以实现当前编辑的基础组件的即时展示预览效果。根据本公开实施例的第二方面，提供了一种目标文件编辑装置，包括：目标文件获取模块，用于获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；可复用组件选择模块，用于在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；源码信息添加模块，用于下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；目标文件编辑模块，用于将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。在本公开的一种示例性实施例中，基于前述方案，所述目标文件是单文件组件。在本公开的一种示例性实施例中，基于前述方案，所述可复用组件选择模块包括单文件组件类型确定单元，所述单文件组件类型确定单元可以用于：确定所述目标文件的后缀名类型；若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。在本公开的一种示例性实施例中，基于前述方案，所述源码添加模块包括源码信息下载单元，所述源码信息下载单元可以用于：获取所述可复用组件对应的组件标识信息；根据所述组件标识信息从预构建的组建源码数据库中下载所述可复用组件对应的源码信息。在本公开的一种示例性实施例中，基于前述方案，所述源码添加模块还可以用于：确定所述目标文件对应的文件结构；基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。在本公开的一种示例性实施例中，基于前述方案，所述目标文件编辑装置还包括文件编辑模块，所述本文档来自技高网...

【技术保护点】
1.一种目标文件编辑方法，其特征在于，包括：/n获取输入的目标文件，并提供用于编辑所述目标文件的可视化编辑界面，所述可视化编辑界面包括组件添加功能；/n在触发所述组件添加功能时提供可复用组件标识列表，并确定在所述可复用组件标识列表中选择的可复用组件标识；/n下载所述可复用组件标识对应的可复用组件的源码信息，并获取所述可复用组件的组件注册信息；/n将所述源码信息添加到所述目标文件所处项目文件的同级目录，并根据所述组件注册信息对所述目标文件进行编辑，以根据编辑后的目标文件调用并运行所述源码信息，实现所述可复用组件的复用。/n

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


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


3.根据权利要求2所述的目标文件编辑方法，其特征在于，所述在触发所述组件添加功能时提供可复用组件列表，包括：
确定所述目标文件的后缀名类型；
若所述后缀名类型是单文件组件类型，则在触发所述组件添加功能时提供可复用组件列表；
若所述后缀名类型不是单文件组件类型，则在触发所述组件添加功能时以弹窗的形式生成提示信息，以提示重新输入单文件组件类型的文件。


4.根据权利要求1所述的目标文件编辑方法，其特征在于，所述下载所述可复用组件标识对应的可复用组件的源码信息，包括：
获取所述可复用组件对应的组件标识信息；
根据所述组件标识信息从预构建的组件源码数据库中下载所述可复用组件对应的源码信息。


5.根据权利要求1所述的目标文件编辑方法，其特征在于，所述根据所述组件注册信息对所述目标文件进行编辑，包括：
确定所述目标文件对应的文件结构；
基于所述文件结构确定所述组件注册信息在所述目标文件中的插入位置；
根据所述插入位置将所述组件注册信息添加到所述目标文件；其中，所述组件注册信息包括所述可复用组件的标签信息、导入信息和注册代码。


6.根据权利要求1所述的目标文件编辑方法，其特征在于，所述可视化编辑界面还包括文件编辑功能，所述方法还包括：
在触发所述文件编辑功能时提供基础组件列表以及编辑区域；
响应将所述基础组件列表中的至少一个基础组件拖动到所述编辑区域中，提供各所述基础组件对应的属性编辑表格，以根据所述属性编辑表格获取填入的各所述基础组件的属性数据；
根据所述属性数据生成所述编辑区域中至少一个基础组件对应的组件代码数据，并根据所述组件代码数据生成目标文件。

【专利技术属性】
技术研发人员：杨婷，何婷，
申请(专利权)人：北京京东振世信息技术有限公司，
类型：发明
国别省市：北京;11