CN114385155A - vue项目可视化工具生成方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，揭露一种vue项目可视化工具生成方法，包括：获取vue项目的配置文件及地址信息；查找配置文件下的模块包文件，根据模块包文件确定项目框架信息；解析地址信息，遍历vue项目的目录结构，得到数据格式转换的目录结果并生成目录结构树状图；确定vue项目中页面组件及单独组件，分析组件之间的代码逻辑，得到页面及单独组件的方法调用链路表；确定vue项目中的页面，分析页面中每个组件之间的页面跳转关系，生成页面跳转结构图，将上述分析结果汇集为一套可视化文件。此外本发明还涉及区块链技术，所述可视化文件可存储于区块链节点。本发明还提出一种vue项目可视化工具生成装置、设备以及介质。本发明有利于项目的快速熟悉及开发。

Description

vue项目可视化工具生成方法、装置、设备及存储介质

技术领域

本发明涉及研发管理领域领域，尤其涉及一种vue项目可视化工具生成方法、装置、电子设备及计算机可读存储介质。

背景技术

对于移动端\PC端开发者来说，Vue开发框架具有编码简洁、体积小、运行效率高等优点，因此Vue开发框架成为了前端开发者较为常用的开发框架。

但目前的前端Vue开发项目中，主要都是通过组件化写法去编写组件代码，然后再通过引入各种各样的组件组合成完整的页面，对于一些大型项目，往往涉及到上百个页面，页面之间的跳转关系、逻辑交叉都十分复杂，要了解并熟悉一个项目需要了解项目的整体框架结构、熟悉项目的目录结构、文件划分以及页面之间存在的跳转关系，但对于新接手项目的开发者来说，需要耗费大量时间，投入大量的人力成本，才能理清vue项目内在结构及代码逻辑，不利于项目的快速熟悉及开发。

发明内容

本发明提供一种vue项目可视化工具生成方法、装置及计算机可读存储介质，其主要目的在于解决vue项目内在结构及代码逻辑难以理清的问题。

为实现上述目的，本发明提供的一种vue项目可视化工具生成方法，包括：

获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

可选地，所述根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件，包括：

根据所述配置文件的配置的地址信息确定所述配置文件配置的根目录地址；

查找所述根目录地址下的模块包文件；

解析所述模块包文件，得到项目框架信息文件。

可选地，所述解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，包括：

根据所述配置文件中的地址信息确定所述vue项目的根目录；

利用预设的解析器方法遍历所述根目录的目录结构，得到第一级目录结构，其中，所述第一级目录结构包括所述根目录下的子文件夹；

利用所述解析器方法遍历所述子文件夹的目录结构，直至遍历完最后一层子文件夹，得到子文件夹目录结构；

汇集根据所述第一级目录结构及所述子文件夹目录结构，得到目录结果。

可选地，所述将所述目录结果进行数据格式转换，生成目录结构树状图，包括：

预配置树状图生成代码；

将所述目录结果转化为所述树状图适用的数据格式并输入到所述预配置的树状图生成代码中，生成目录结构树状图。

可选地，所述根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，包括：

根据所述地址信息确定所述vue项目中的根目录文件；

遍历所述根目录文件下vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述组件的template标签，过滤掉没有所述template标签的组件，得到页面组件；

查找所述页面组件的template标签内的页面点击关键字，根据所述页面点击关键字确定所述页面使用的对应方法；

根据方法所对应的函数名查找所述方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法的名称，并返回根据所述方法所对应的函数名查找所述方法内是否包含下一个方法的调用的步骤，直至不包含下一个方法的调用，根据调用的所有方法生成每个页面的方法调用链路表。

可选地，所述分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表，包括：

遍历所述vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述所有组件的template标签，获取所述组件内没有所述template标签的组件，得到所述vue项目内的单独组件；

查找所述单独组件内预设对象内所使用的函数名称，根据所述函数名称确定所述单独组件所调用的方法名称，得到单独组件的调用方法；

根据所述调用方法所对应的函数名查找调用方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法名称，并返回根据方法所对应的函数名查找调用方法内是否包含下一个方法的调用的步骤，直至所述下一个方法内不包含下一步方法的调用，根据所述组件内所有方法生成单独组件的方法调用链路表。

可选地，所述根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图，包括：

利用所述地址信息对应的根目录文件确定所述vue项目中所有页面的组件；

遍历所述组件并分析所述vue项目中所有页面的每个组件，根据所述分析结果确定所述每个组件的初始跳转关系；

根据所述初始跳转关系分析所述每个组件内的跳转关系及跳转页面，并根据所述跳转关系及跳转页面确定所述每个组件之间的完整跳转关系；

根据所述配置文件及所述每个组件之间的完整跳转关系确定所述每个组件之间的页面关系；

将所述页面跳转关系进行数据格式转化，生成页面跳转结构图。

为了解决上述问题，本发明还提供一种vue项目可视化工具生成装置，所述装置包括：

配置文件获取模块，用于获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

项目框架信息文件确定模块，用于根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

目录结构树状图生成模块，解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

方法调用链路表生成模块，用于根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

页面跳转结构图生成模块，用于根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

项目可视化工具生成模块，用于将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述所述的vue项目可视化工具生成方法。

为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的vue项目可视化工具生成方法。

本发明实施例根据前端项目中的配置文件中的地址信息查找模块包文件，根据该模块包文件确定vue项目的项目框架信息文件；同时通过解析该地址信息，根据解析结果遍历所述vue项目的目录结构，得到目录结构树状图；分析vue项目中的页面组件之间的代码逻辑及单独组件之间的代码逻辑，得到页面及单独组件的方法调用链路表，根据该地址信息确定vue项目中所有页面，分析页面中每个组件之间的跳转关系，生成页面跳转结构图，将所述项目框架信息文件、目录结构树状图、每个页面及单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，写入输出文件中，得到项目可视化工具，可实现直观的向项目开发者展示项目内在的结构逻辑及代码逻辑，帮助项目开发者快速熟悉项目内容的目的。因此本发明提出的vue项目可视化工具生成方法、装置、电子设备及计算机可读存储介质，可以解决vue项目内在结构及代码逻辑难以理清的问题。

附图说明

图1为本发明一实施例提供的vue项目可视化工具生成方法的流程示意图；

图2为本发明一实施例提供的生成目录结果的流程示意图；

图3为本发明一实施例提供的生成页面跳转结构图的流程示意图；

图4为本发明一实施例提供的vue项目可视化工具生成装置的功能模块图；

图5为本发明一实施例提供的实现所述vue项目可视化工具生成方法的电子设备的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本申请实施例提供一种vue项目可视化工具生成方法。所述vue项目可视化工具生成方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述vue项目可视化工具生成方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。所述服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(ContentDelivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

参照图1所示，为本发明一实施例提供的vue项目可视化工具生成方法的流程示意图。在本实施例中，所述vue项目可视化工具生成方法包括：

S1、获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

本发明实施例中，所述地址信息包括：所述Vue项目的根目录地址及输出后续可视化文件的文件地址，本发明其中一可选实施例中，所述配置文件可以是config.json文件。

S2、根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

本发明实施例中，所述项目框架信息文件包括项目的框架版本、脚手架版本及第三方工具包信息。

详细地，所述根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件，包括：

根据所述配置文件的配置的地址信息确定所述配置文件配置的根目录地址；

查找所述根目录地址下的模块包文件；

解析所述模块包文件，得到项目框架信息文件。

本发明实施例中，所述模块包文件的文件名为package.json，本发明实施例可以通过所述文件名package.json查找所述项目根目录地址下的模块包文件，通过解析所述模块包文件可以得到所述项目框架信息文件。

进一步地，所述解析所述模块包文件，得到项目框架信息文件，包括：

查找所述模块包文件中配置的vue库的版本，根据所述vue库的版本输出所述vue项目当前使用的框架版本信息；

根据所述模块包文件中配置的脚手架版本，输出所述vue项目当前使用的脚手架版本信息；

查找所述模块包文件中第三方插件所写入的对象，利用Object.keys方法遍历所述对象中所有的属性名称，根据所述属性名称确定所述vue项目使用的第三方工具包信息；

汇集所述框架版本信息、所述脚手架版本信息及第三方工具包信息，生成项目框架信息文件。

本发明实施例中，所述框架版本信息会影响新语法项目的使用；脚手架版本信息决定了打包构建项目的方式；第三方工具包信息在一定程度上代表了项目构建中代码使用的精简及代码的重复使用，通过所述框架版本信息、脚手架版本信息及所述第三方工具包信息的项目框架信息文件，能够更好的展示所述vue项目。

S3、解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

本发明实施例中，所述目录结构树状图为所述vue项目目录结构的展示，通过所述目录结构树状图可以快速区分业务逻辑代码目录、公共逻辑代码目录、页面样式目录及构建脚本目录。

详细地，参阅图2所示，所述解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，包括：

S31、根据所述配置文件中的地址信息确定所述vue项目的根目录；

S32、利用预设的解析器方法遍历所述根目录的目录结构，得到第一级目录结构，其中，所述第一级目录结构包括所述根目录下的子文件夹；

S33、利用所述解析器方法遍历所述子文件夹的目录结构，直至遍历完最后一层子文件夹，得到子文件夹目录结构；

S34、汇集根据所述第一级目录结构及所述子文件夹目录结构，得到目录结果。

本发明实施例中，所述预设的解析器方法可以是node.js解析器中获取文件目录的方法fs.readdirSync()。

通过所述解析器方法得到的所述目录结果只是所述vue项目目录结构的数组对象体现，不能够直接地展示项目之间的目录关系，因此，本发明实施例将所述目录结果进行格式转换，得到目录结构树状图，所述目录结构树状图可以直观的展示所述vue项目的目录结构。

其中，所述将所述目录结果进行数据格式转换，生成目录结构树状图，包括：

预配置树状图生成代码；

将所述目录结果转化为所述树状图适用的数据格式并输入到所述预配置的树状图生成代码中，生成目录结构树状图。

本发明其中一可选实施例中，所述目录结构树状图可以是Echarts图表中的树状图。

具体地，本发明实施例所述预配置树状图生成代码是通过Echarts图表实例中的set0ption方法，其中，配置的树状图生成代码的具体核心参数为在series数组中的对象配置中进行如下设置：

type字段设置为tree，表示为树状图；

date字段设置为所述树状图适用的数据格式；

将expendAndCollapse设置为true，表示默认将树状图展开。

通过所述目录结构树状图能够更直观地展示所述vue项目中各个目录层级的功能，提高开发者了解项目的速度，以便于新接手项目的开发者快速上手项目。

S4、根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

本发明实施例中，所述方法调用链路表是所述vue组件中每个页面及每个组件实现的逻辑方式，即所述页面和组件实现过程中所调用的方法链路。

详细地，所述根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，包括：

根据所述地址信息确定所述vue项目中的根目录文件；

遍历所述根目录文件下vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述组件的template标签，过滤掉没有所述template标签的组件，得到页面组件；

查找所述页面组件的template标签内的页面点击关键字，根据所述页面点击关键字确定所述页面使用的对应方法；

根据方法所对应的函数名查找所述方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法的名称，并返回根据所述方法所对应的函数名查找所述方法内是否包含下一个方法的调用的步骤，直至不包含下一个方法的调用，根据调用的所有方法生成每个页面的方法调用链路表。

进一步地，所述分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表，包括：

遍历所述vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述所有组件的template标签，获取所述组件内没有所述template标签的组件，得到所述vue项目内的单独组件；

查找所述单独组件内预设对象内所使用的函数名称，根据所述函数名称确定所述单独组件所调用的方法名称，得到单独组件的调用方法；

根据所述调用方法所对应的函数名查找调用方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法名称，并返回根据方法所对应的函数名查找调用方法内是否包含下一个方法的调用的步骤，直至所述下一个方法内不包含下一步方法的调用，根据所述组件内所有方法生成单独组件的方法调用链路表。

本发明其中一可选实施例中，所述方法调用链路表支持vue框架版本的更新，即对于vue3.0版本框架，提出了高级语法特性组合式api，根据所述项目可视化工具可以将组合式api编写的组件，进行变量、方法调用链路的可视化展示。

本发明实施例通过所述页面方法调用链路表及组件方法调用链路表能够使得vue项目开发者不需要查看项目源代码就能快速理清页面和组件的逻辑方法实现方式，提高项目开发效率。

S5、根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

本发明实施例中，所述页面跳转结构图是对所述vue项目页面之间的跳转关系进行梳理，再通过Echarts图表库对所述页面跳转关系进行格式转换得到的。

详细地，参阅图3所述，所述根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图，包括：

S51、利用所述地址信息对应的根目录文件确定所述vue项目中所有页面的组件；

S52、遍历所述组件并分析所述vue项目中所有页面的每个组件，根据所述分析结果确定所述每个组件的初始跳转关系；

S53、根据所述初始跳转关系分析所述每个组件内的跳转关系及跳转页面，并根据所述跳转关系及跳转页面确定所述每个组件之间的完整跳转关系；

S54、根据所述配置文件及所述每个组件之间的完整跳转关系确定所述每个组件之间的页面关系；

S55、将所述页面跳转关系进行数据格式转化，生成页面跳转结构图。

进一步地，本发明实施例中，所述遍历所述所有组件并分析所述vue项目中所有页面的每个组件，根据所述分析结果确定所述每个组件的初始跳转关系，包括：

根据所述组件文件的后缀名遍历所述所有组件，得到所有组件；

根据预设的关键字确定所述所述所有组件对应的页面名称；

根据每个所述组件对应页面的页面名称确定所述组件的页面初始跳转记录，并根据所述页面初始跳转记录确定所述每个组件的初始跳转关系。

本发明实施例中，根据所述初始跳转关系有利于后续根据所述初始跳转关系确定每个组件内的跳转关系及跳转页面。

本发明实施例中，所述预设的关键字包括但不限于：$router.push、$router.replace等，或者根据localtion.href获取到所述每个组件所跳转的页面名称。

本发明实施例根据所述配置文件及所述每个组件之间的完整跳转关系确定所述每个组件之间的页面关系，包括：

获取所述配置文件中配置的vue组件与页面之间的映射关系；

根据所述映射关系确定所述每个组件对应的页面名称；

根据所述每个组件对应的页面名称及所述完整跳转关系确定所述每个组件之间的页面关系。

示例性地，将所述页面跳转关系进行数据格式转化，生成页面跳转结构图，原理同上述生成目录结构树状图的步骤，在此不做赘述。

本发明实施例中，通过所述页面跳转结构图，能够让项目开发者清楚分析出所述项目中所有页面之间的跳转关系，能够帮助项目开发者梳理项目之间的逻辑以及项目测试案例场景的编写，避免场景的遗漏。

S6、将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

本发明实施例中，所述项目可视化工具为所述框架信息文件、所述目录结构树状图、所述页面方法调用链路表、所述组件方法调用链路表及所述页面跳转结构图的文件集合。

本发明其中一可选实施例中，可以在命令行(mac系统为终端)，执行命令，如：npmrun pa-vue–project-visual,所述命令执行完成后，即可得到所述一套可视化文件，生成所述项目可视化工具。

本发明其中一可选实施例中，所述项目可视化工具可以通过浏览器查看所述项目可视化工具中的所述一套可视化文件，通过所述项目可视化工具能够使项目开发者快速上手项目开发，了解项目内容，避免在项目开发时出现漏洞。

本发明实施例根据前端项目中的配置文件中的地址信息查找模块包文件，根据该模块包文件确定vue项目的项目框架信息文件；同时通过解析该地址信息，根据解析结果遍历所述vue项目的目录结构，得到目录结构树状图；分析vue项目中的页面组件之间的代码逻辑及单独组件之间的代码逻辑，得到页面及单独组件的方法调用链路表，根据该地址信息确定vue项目中所有页面，分析页面中每个组件之间的跳转关系，生成页面跳转结构图，将所述项目框架信息文件、目录结构树状图、每个页面及单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，写入输出文件中，得到项目可视化工具，可实现直观的向项目开发者展示项目内在的结构逻辑及代码逻辑，帮助项目开发者快速熟悉项目内容的目的。因此本发明提出的vue项目可视化工具生成方法，可以解决vue项目内在结构及代码逻辑难以理清的问题。

如图4所示，是本发明一实施例提供的vue项目可视化工具生成装置的功能模块图。

本发明所述vue项目可视化工具生成装置100可以安装于电子设备中。根据实现的功能，所述vue项目可视化工具生成装置100可以包括配置文件获取模块101、项目框架信息文件确定模块102、目录结构树状图生成模块103、方法调用链路表生成模块104、页面跳转结构图生成模块105及项目可视化工具生成模块106。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。

在本实施例中，关于各模块/单元的功能如下：

所述配置文件获取模块101，用于获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

所述项目框架信息文件确定模块102，用于根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

所述目录结构树状图生成模块103，用于解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

所述方法调用链路表生成模块104，用于根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

所述页面跳转结构图生成模块105，用于根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

所述项目可视化工具生成模块106，用于将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

详细地，本发明实施例中所述vue项目可视化工具生成装置100中所述的各模块在使用时采用与上述图1至图3中所述的vue项目可视化工具生成方法一样的技术手段，并能够产生相同的技术效果，这里不再赘述。

如图5所示，是本发明一实施例提供的实现vue项目可视化工具生成方法的电子设备的结构示意图。

所述电子设备1可以包括处理器10、存储器11、通信总线12以及通信接口13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如vue项目可视化工具生成程序。

其中，所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(ControlUnit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如执行vue项目可视化工具生成程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。

所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(Secure Digital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如vue项目可视化工具生成程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

所述通信总线12可以是外设部件互连标准(peripheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。

所述通信接口13用于上述电子设备与其他设备之间的通信，包括网络接口和用户接口。可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。所述用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。

图5仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图5示出的结构并不构成对所述电子设备1的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。

所述电子设备1中的所述存储器11存储的vue项目可视化工具生成程序是多个指令的组合，在所述处理器10中运行时，可以实现：

获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

具体地，所述处理器10对上述指令的具体实现方法可参考附图对应实施例中相关步骤的描述，在此不赘述。

进一步地，所述电子设备1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。所述计算机可读存储介质可以是易失性的，也可以是非易失性的。例如，所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。

本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：

获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请实施例可以基于研发管理领域对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一、第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种vue项目可视化工具生成方法，其特征在于，所述方法包括：

获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

2.如权利要求1所述的vue项目可视化工具生成方法，其特征在于，所述根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件，包括：

根据所述配置文件的配置的地址信息确定所述配置文件配置的根目录地址；

查找所述根目录地址下的模块包文件；

解析所述模块包文件，得到项目框架信息文件。

3.如权利要求1所述的vue项目可视化工具生成方法，其特征在于，所述解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，包括：

根据所述配置文件中的地址信息确定所述vue项目的根目录；

利用预设的解析器方法遍历所述根目录的目录结构，得到第一级目录结构，其中，所述第一级目录结构包括所述根目录下的子文件夹；

利用所述解析器方法遍历所述子文件夹的目录结构，直至遍历完最后一层子文件夹，得到子文件夹目录结构；

汇集根据所述第一级目录结构及所述子文件夹目录结构，得到目录结果。

4.如权利要求1所述的vue项目可视化工具生成方法，其特征在于，所述将所述目录结果进行数据格式转换，生成目录结构树状图，包括：

预配置树状图生成代码；

将所述目录结果转化为所述树状图适用的数据格式并输入到所述预配置的树状图生成代码中，生成目录结构树状图。

5.如权利要求1所述的vue项目可视化工具生成方法，其特征在于，所述根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，包括：

根据所述地址信息确定所述vue项目中的根目录文件；

遍历所述根目录文件下vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述组件的template标签，过滤掉没有所述template标签的组件，得到页面组件；

查找所述页面组件的template标签内的页面点击关键字，根据所述页面点击关键字确定所述页面使用的对应方法；

根据方法所对应的函数名查找所述方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法的名称，并返回根据所述方法所对应的函数名查找所述方法内是否包含下一个方法的调用的步骤，直至不包含下一个方法的调用，根据调用的所有方法生成每个页面的方法调用链路表。

6.如权利要求5所述的vue项目可视化工具生成方法，其特征在于，所述分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表，包括：

遍历所述vue项目的组件文件，得到所述vue项目的所有组件，并遍历所述所有组件的template标签，获取所述组件内没有所述template标签的组件，得到所述vue项目内的单独组件；

查找所述单独组件内预设对象内所使用的函数名称，根据所述函数名称确定所述单独组件所调用的方法名称，得到单独组件的调用方法；

根据所述调用方法所对应的函数名查找调用方法内是否包含下一个方法的调用；

若包含下一个方法的调用，则记录所述下一个方法名称，并返回根据方法所对应的函数名查找调用方法内是否包含下一个方法的调用的步骤，直至所述下一个方法内不包含下一步方法的调用，根据所述组件内所有方法生成单独组件的方法调用链路表。

7.如权利要求1所述的vue项目可视化工具生成方法，其特征在于，所述根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图，包括：

利用所述地址信息对应的根目录文件确定所述vue项目中所有页面的组件；

遍历所述组件并分析所述vue项目中所有页面的每个组件，根据所述分析结果确定所述每个组件的初始跳转关系；

根据所述初始跳转关系分析所述每个组件内的跳转关系及跳转页面，并根据所述跳转关系及跳转页面确定所述每个组件之间的完整跳转关系；

根据所述配置文件及所述每个组件之间的完整跳转关系确定所述每个组件之间的页面关系；

将所述页面跳转关系进行数据格式转化，生成页面跳转结构图。

8.一种vue项目可视化工具生成装置，其特征在于，所述装置包括：

配置文件获取模块，用于获取前端vue项目中的配置文件，其中，所述配置文件配置了地址信息；

项目框架信息文件确定模块，用于根据所述配置文件配置的地址信息查找模块包文件，根据所述模块包文件确定所述vue项目的项目框架信息文件；

目录结构树状图生成模块，用于解析所述配置文件中的地址信息，根据所述解析结果遍历所述vue项目的目录结构，得到目录结果，并将所述目录结果进行数据格式转换，生成目录结构树状图；

方法调用链路表生成模块，用于根据所述配置文件的地址信息，确定所述vue项目中页面的组件，分析所述组件之间的代码逻辑，得到所述页面中每个页面的方法调用链路表，及分析所述vue项目中所有单独组件的代码逻辑，得到单独组件的方法调用链路表；

页面跳转结构图生成模块，用于根据所述配置文件中的地址信息确定所述vue项目中所有页面，分析所述所有页面中的每个组件，并根据所述分析结果确定每个组件之间的页面跳转关系，生成页面跳转结构图；

项目可视化工具生成模块，用于将所述项目框架信息文件、所述目录结构树状图、所述每个页面的方法调用链路表、所述单独组件的方法调用链路表及所述页面跳转结构图汇集为一套可视化文件，并写入所述配置文件的地址信息对应的输出文件中，得到项目可视化工具。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任意一项所述的vue项目可视化工具生成方法。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述的vue项目可视化工具生成方法。

Images