本发明专利技术实施例提供了一种组件重用方法、装置、电子设备和存储介质。应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述组件重用方法包括：所述外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至所述数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。本发明专利技术实施例通过将vue框架中通用的组件与所在项目分离，将组件单独提取进行维护，解决了跨项目的通用组件的重用，降低了维护成本。了维护成本。了维护成本。
【技术实现步骤摘要】
一种组件重用方法、装置、电子设备和存储介质
[0001]本专利技术涉及前端开发
，特别是涉及一种组件重用方法、一种组件重用装置、一种电子设备和一种存储介质。
技术介绍
[0002]在当前日新月异WEB(World Wide Web，全球广域网)开发领域，使用vue框架开发前端项目已成为目前大量前端开发者的选择。在vue生态中拥有大量的第三方UI(User Interface，用户界面)组件库，前端开发人员可以通过使用这些第三方UI组件库快速对项目进行开发；第三方UI组件库的出现为前端开发人员提供了很大的便利。然后随着大量使用第三方UI组件库，同时也出现了一批新的问题。如UI组件必须跟随项目进行编译或者引入CDN(Content Delivery Network，内容分发网络)链接全局，注入所有组件；导致前端代码体积臃肿，且外部组件的使用流程变得复杂。或者由于自定义组件和业务的通用组件在多个项目之间相互拷贝，项目修改维护复杂容易出错，维护对项目进行修改时，将导致组件多项目多版本问题，增大了出bug(故障)几率，也更难以维护。
技术实现思路
[0003]鉴于上述问题，提出了本专利技术实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种组件重用方法、一种组件重用装置、一种电子设备和一种存储介质。
[0004]为了解决上述问题，在本专利技术的第一个方面，本专利技术实施例公开了一种组件重用方法，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述方法包括：
[0005]所述外部组件加载器获取重用数据；
[0006]所述外部组件加载器发送所述重用数据至所述数据托管服务；
[0007]所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；
[0008]所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。
[0009]可选地，所述目标通用组件数据包括通用组件名称和通用组件哈希值；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件的步骤包括：
[0010]将所述通用组件名称注册为vue实例；
[0011]基于所述通用组件哈希值定位所述目标通用组件；
[0012]加载所述目标通用组件至所述vue实例，生成外部组件。
[0013]可选地，所述目标通用组件包括定义结构对象；所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤包括：
[0014]加载所述定义结构对象；
[0015]将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。
[0016]可选地，所述方法还包括：
[0017]所述外部组件加载器判断所述vue实例是否与预设实例相同；
[0018]当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；
[0019]当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。
[0020]可选地，所述vue框架还设置有组件编译器，所述方法还包括：
[0021]所述组件编译器获取历史项目数据；
[0022]所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；
[0023]所述组件编译器对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据。
[0024]可选地，所述已有vue组件包括根目录数据；所述对所述已有vue组件进行编译，生成所述通用组件和所述通用组件数据的步骤包括：
[0025]依据根目录数据生成配置文件，所述配置文件包括通用组件名称；
[0026]编译所述已有vue组件生成通用组件哈希值和源代码；
[0027]确定为所述源代码为所述通用组件，确定所述通用组件哈希值和通用组件名称为通用组件数据。
[0028]可选地，所述vue框架还设置有初始化服务，所述方法还包括：
[0029]所述初始化服务获取外部组件加载器安装文件；
[0030]所述初始化服务将所述外部组件加载器安装文件注册到所述vue框架中。
[0031]在本专利技术的第二个方面，本专利技术实施例还公开了一种组件重用装置，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述装置包括：
[0032]第一获取模块，用于所述外部组件加载器获取重用数据；
[0033]发送模块，用于所述外部组件加载器发送所述重用数据至所述数据托管服务；
[0034]查询模块，用于所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；
[0035]加载模块，用于所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。
[0036]在本专利技术的第三个方面，本专利技术实施例还公开了一种电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的组件重用方法的步骤。
[0037]在本专利技术的第四个方面，本专利技术实施例还公开了一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的组件重用方法的步骤。
[0038]本专利技术实施例包括以下优点：
[0039]在本专利技术实施例中通过外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组
件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。通过将vue框架中通用组件与所在项目分离并单独提取存储在数据托管服务中，可以通过在数据托管服务中对通用组件进行维护管理，降低打包维护成本；解决了跨项目的通用组件的重用；通过外部组件加载器来对通用组件进行的加载注册，简化通用组件作为外部组件的使用流程，降低了开发难度。
附图说明
[0040]图1是本专利技术的一种组件重用方法实施例的步骤流程图；
[0041]图2是本专利技术的另一种组件重用方法实施例的步骤流程图；
[0042]图3是本专利技术的一种组件重用方法实施例的外部组件加载器工作示意图；
[0043]图4是本专利技术的又一种组件重用方法实施例的步骤流程图；
[0044]图5是本专利技术的一种组件重用方法实施例的vue框架安装示例图；
[0045]图6是本专利技术的一种组件重用方法示例的流程示意图；
[0046]图7是本专利技术的一种组件重用方法示例的目标通用组件加载示意图；
[0047]图8是本专利技术的一种组件重用装置实施例的结构框图。本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种组件重用方法，其特征在于，应用于vue框架，所述vue框架设置有外部组件加载器和数据托管服务；所述数据托管服务存储有通用组件和对应通用组件数据，所述通用组件基于已有vue组件编译生成；所述方法包括：所述外部组件加载器获取重用数据；所述外部组件加载器发送所述重用数据至所述数据托管服务；所述数据托管服务查询与所述重用数据匹配的目标通用组件数据；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件，以进行页面渲染。2.根据权利要求1所述的方法，其特征在于，所述目标通用组件数据包括通用组件名称和通用组件哈希值；所述外部组件加载器依据所述目标通用组件数据，加载目标通用组件生成外部组件的步骤包括：将所述通用组件名称注册为vue实例；基于所述通用组件哈希值定位所述目标通用组件；加载所述目标通用组件至所述vue实例，生成外部组件。3.根据权利要求2所述的方法，其特征在于，所述目标通用组件包括定义结构对象；所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤包括：加载所述定义结构对象；将所述定义结构对象对所述vue实例的属性进行定义，生成外部组件。4.根据权利要求2所述的方法，其特征在于，所述方法还包括：所述外部组件加载器判断所述vue实例是否与预设实例相同；当所述vue实例与所述预设实例不相同，所述外部组件加载器执行所述加载所述目标通用组件至所述vue实例，生成外部组件的步骤；当所述vue实例与所述预设实例相同时，所述外部组件加载器引用所述预设实例，生成外部组件。5.根据权利要求1至4任一项所述的方法，其特征在于，所述vue框架还设置有组件编译器，所述方法还包括：所述组件编译器获取历史项目数据；所述组件编译器在所述历史项目数据中抽离业务通用组件，生成所述已有vue组件；所述...
【专利技术属性】
技术研发人员：胡赟，郑丹丹，商宏文，
申请(专利权)人：中国电信股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。