组件名称的设置方法、装置、电子设备及可读存储介质与流程

1.本技术涉及网页开发技术领域，特别是涉及一种组件名称的设置方法、装置、电子设备及可读存储介质。


背景技术：

2.目前，在使用vue3.x和vue2.x时，都是需要前端开发人员在每个组件中自己设置组件名，便于一个组件在使用另一个组件时，方便根据组件名来进行引入。
3.在实现本技术的过程中，申请人发现相关技术至少存在以下问题：
4.在开发过程中，需要前端开发人员在每个组件中手动设置组件名，如果项目很大，组件很多，开发量很大，导致开发人员工作量巨大，且容易造成组件名重复。


技术实现要素：

5.有鉴于此，本技术提供了一种组件名称的设置方法、装置、电子设备及可读存储介质，主要目的在于解决开发人员手动设置组件名工作量巨大，且容易造成组件名重复的问题。
6.依据本技术第一方面，提供了一种组件名称的设置方法，该方法包括：
7.获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；
8.根据多个项目信息，确定每个组件的组件名称；
9.根据多个项目信息，在多个组件中，确定多个目标组件；
10.根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称。
11.可选地，多个项目信息包括每个文件的文件名称，根据多个项目信息，确定每个组件的组件名称的步骤，具体包括：
12.对于任一组件，根据多个项目，确定组件所在的文件的目标文件名称；
13.根据目标文件名称，确定组件的组件名称。
14.可选地，根据目标文件名称，确定组件的组件名称的步骤，具体包括：
15.在多个文件名称中，判断目标文件名称与除目标文件名称外的其余名称是否相同；
16.若相同，获取组件所在的文件夹的目标文件夹名称；
17.根据目标文件夹名称和目标文件名称，生成组件的组件名称；
18.若不相同，根据目标文件名称，生成组件的组件名称。
19.可选地，根据目标文件名称，生成组件的组件名称的步骤，具体包括：
20.根据目标文件名称，确定每个组件的name属性的属性值；
21.根据属性值，对name属性赋值，作为组件的组件名称。
22.可选地，根据多个项目信息，在多个组件中，确定多个目标组件的步骤，具体包括：
23.根据多个项目信息，确定组件引入方法；
24.利用组件引入方法，在多个组件中，确定多个目标组件。
25.可选地，根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称的步骤，具体包括：
26.获取每个目标组件的目标组件名称；
27.根据目标组件名称，确定目标组件名称对应的组件路由的name属性的属性值；
28.根据属性值，对name属性赋值，作为组件路由的路由名称；
29.根据路由打包工具，确定目标项目对应的组件引入方法。
30.可选地，多个项目信息还包括预设路由打包工具，根据多个项目信息，确定组件引入方法的步骤，具体包括：
31.根据预设路由打包工具，确定目标项目对应的组件引入方法。
32.依据本技术第二方面，提供了一种组件名称的设置装置，该装置包括：
33.获取模块，用于获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；
34.第一确定模块，用于根据多个项目信息，确定每个组件的组件名称；
35.第二确定模块，用于根据多个项目信息，在多个组件中，确定多个目标组件；
36.第三确定模块，用于根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称。
37.可选地，多个项目信息包括每个文件的文件名称，第一确定模块，具体用于：
38.对于任一组件，根据多个项目，确定组件所在的文件的目标文件名称；
39.将目标文件名称作为组件的组件名称。
40.可选地，该装置还包括：
41.判断模块，用于在多个文件名称中，判断目标文件名称与除目标文件名称外的其余名称是否相同。
42.可选地，获取模块，具体还用于：
43.若相同，获取组件所在的文件夹的目标文件夹名称。
44.可选地，该装置还包括：
45.生成模块，用于根据目标文件夹名称和目标文件名称，生成组件的组件名称。
46.可选地，第一确定模块，具体还用于：
47.根据目标文件名称，确定每个组件的name属性的属性值；
48.根据属性值，对name属性赋值，作为组件的组件名称。
49.可选地，第二确定模块，具体用于：
50.根据多个项目信息，确定组件引入方法；
51.利用组件引入方法，在多个组件中，确定多个目标组件。
52.可选地，第三确定模块，具体用于：
53.获取每个目标组件的目标组件名称；
54.根据目标组件名称，确定目标组件名称对应的组件路由的name属性的属性值；
55.根据属性值，对name属性赋值，作为组件路由的路由名称；
56.根据路由打包工具，确定目标项目对应的组件引入方法。
57.可选地，多个项目信息还包括预设路由打包工具，该装置还包括：
58.第四确定模块，用于根据预设路由打包工具，确定目标项目对应的组件引入方法。
59.依据本技术第三方面，提供了一种电子设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现第一方面中任一项所述方法的步骤。
60.依据本技术第四方面，提供了一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面中任一项所述的方法的步骤。
61.借由上述技术方案，本技术提供的一种组件名称的设置方法、装置、电子设备及可读存储介质，相较于现有技术中，通过前端开发人员手动设置组件名称以及路由名称，开发人员工作量大，花费时间较多，且不同开发人员分别设置容易造成组件名称重复，开发错误率较高。此外，若组件名称与路由名称设置不一致，易出现混乱，还需要开发人员花时间将路由名称与组件名称一一对应起来，开发效率较低的技术问题，提出了自动将vue项目中每个组件所在文件的文件名称，设置为该组件的组件名称，以及该组件的组件路由的路由名称。一方面，通过自动化配置vue项目中的组件名称和配置路由文件中的组件路由名称，无需前端开发人员手动设置，降低开发人员工作量的同时，节省了开发时间，有效提高开发效率；另一方面，对vue项目中的组件名称和组件路由名称进行了统一，都采用组件文件名称，避免了名称的不统一导致的混乱，使得开发人员在使用组件时，根据组件文件名称，立刻就能知道这个组件的组件名称和组件路由名称，降低了开发出错的概率，有效提高了开发的准确性。
62.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。
附图说明
63.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
64.图1示出了本技术实施例提供的一种组件名称的设置方法流程示意图；
65.图2示出了本技术实施例提供的另一种组件名称的设置方法流程示意图；
66.图3示出了本技术实施例提供的一种组件名称的设置装置的结构示意图。
具体实施方式
67.下面将参照附图更详细地描述本技术的示例性实施例。虽然附图中显示了本技术的示例性实施例，然而应当理解，可以以各种形式实现本技术而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本技术，并且能够将本技术的范围完整的传达给本领域的技术人员。
68.本技术实施例提供了一种组件名称的设置方法，如图1所示，该方法包括：
69.101、获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件。
70.本技术提供了一种组件名称的设置方法，其中，目标项目指的是vue项目。在实际
应用中，前端开发人员在使用vue框架时会进行组件化开发，前端框架vue版本主要有2.x和3.x。在使用vue3.x和vue2.x时，都是需要前端开发人员在每个组件中自己设置组件名，以便于一个组件在使用另一个组件时，方便根据组件名来进行引入，所以组件名的设置是前端项目开发中很重要的一环。具体地，vue项目中，所有功能性组件会放在components文件夹中，所有页面组件会放在pages文件夹中。
71.102、根据多个项目信息，确定每个组件的组件名称。
72.在该步骤中，vue项目的多个项目信息中包括所有文件夹里的文件名称，利用每个组件所在的组件文件的文件名称，作为该组件的组件名称。现有技术中，通常由前端开发人员手动设置组件名称，以使一个组件在使用另一个组件时，根据组件名称来引入，然而，每个组件的组件名称与文件的文件名称不同，在前端开发人员使用相关组件时，需要花费大量时间一一点击进入文件才能确认待使用的组件。基于上述问题，本技术提出了通过将文件的文件名称作为组件的组件名称，使得文件与组件的名称一致。一方面，前端开发人员在使用组件时，只需查看文件夹中的所有文件名称，即可快速地找到待使用的组件，无需再进入文件去查询组件，大大提高组件引入效率，节省时间；另一方面，避免项目很大，组件很多时，多个前端开发人员同时设置组件名称导致组件名重复。
73.103、根据多个项目信息，在多个组件中，确定多个目标组件。
74.104、根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称。
75.在步骤103和步骤104中，在vue项目中，页面组件会放在pages文件夹中，前端页面都是由页面组件生成的，因此，页面组件会由跳转的逻辑，在路由配置文件中，需要为每个跳转页面组件设置路由名，以便于页面跳转。现有技术中，在开发过程中，通常采用由开发人员手动设置路由名称，这样可能会导致组件名称与路由名称不一致，在页面跳转过程中出现混乱的情况，需要开发人员额外花时间将路由名称和组件名称一一对应起来。基于上述问题，本技术提出了在开发项目时，将组件名称作为其对应的路由的路由名称。具体地，根据目标项目的项目信息，在所有组件中筛选出多个目标组件，需要说明的是，目标组件为页面组件。多个项目信息包括目标项目中多个文件夹的文件夹名称。在vue项目中，功能性组件会放在components文件夹中，页面组件会放在pages文件夹中，因此，需要在vue项目中，根据每个文件夹名称确定出包含页面组件的文件夹，进而确定出所有的页面组件，以对每个页面组件的组件路由进行命名。
76.通过上述方式，使得组件名称和路由名称是相同的，都等于组件的文件名称，统一了名称，进而使得前端开发人员查找组件时，直接通过组件的文件名就知道了组件的组件名称和路由名称，避免了名称上的混乱，确保组件跳转的准确性。
77.本技术实施例提供的组件名称的设置方法，相较于现有技术中，通过前端开发人员手动设置组件名称以及路由名称，开发人员工作量大，花费时间较多，且不同开发人员分别设置容易造成组件名称重复，开发错误率较高。此外，若组件名称与路由名称设置不一致，易出现混乱，还需要开发人员花时间将路由名称与组件名称一一对应起来，开发效率较低的技术问题，提出了自动将vue项目中每个组件所在文件的文件名称，设置为该组件的组件名称，以及该组件的组件路由的路由名称。一方面，通过自动化配置vue项目中的组件名称和配置路由文件中的组件路由名称，无需前端开发人员手动设置，降低开发人员工作量的同时，节省了开发时间，有效提高开发效率；另一方面，对vue项目中的组件名称和组件路
由名称进行了统一，都采用组件文件名称，避免了名称的不统一导致的混乱，使得开发人员在使用组件时，根据组件文件名称，立刻就能知道这个组件的组件名称和组件路由名称，降低了开发出错的概率，有效提高了开发的准确性。
78.进一步的，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例的具体实施过程，本技术实施例提供了另一种组件名称的设置方法，如图2所示，该方法包括：
79.201、获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件。
80.在该步骤中，目标项目指的是vue项目。在实际应用中，前端开发人员在使用vue框架时会进行组件化开发，前端框架vue版本主要有2.x和3.x。在使用vue3.x和vue2.x时，都是需要前端开发人员在每个组件中自己设置组件名，以便于一个组件在使用另一个组件时，方便根据组件名来进行引入，所以组件名的设置是前端项目开发中很重要的一环。具体地，vue项目中，所有功能性组件会放在components文件夹中，所有页面组件会放在pages文件夹中。
81.202、对于任一组件，根据多个项目，确定组件对应的文件的目标文件名称。
82.在该步骤中，多个项目信息包括vue项目中每个文件的文件名称。在实际过程中，vue.js是一个渐进式的javascript框架，在使用webpack构建vue项目时，可以使用一种新的构建模式：.vue单文件组件，也就是说，vue单文件组件就是一个后缀名为.vue单文件组件就是一个后缀名为.vue的文件。因此，在开发vue项目过程中，对于任一组件来说，确定每个组件对应的组件文件的目标文件名称，进而将该目标文件名称作为组件的组件名称。
83.203、在多个文件名称中，判断目标文件名称与除目标文件名称外的其余名称是否相同，若是，进入步骤204，若否，进入步骤206。
84.204、获取组件所在的文件夹的目标文件夹名称。
85.205、根据目标文件夹名称和目标文件名称，生成组件的组件名称。
86.在步骤203至步骤205中，在vue项目开发过程中，由于项目很大，组件较多，会有不同的开发人员负责不同的文件夹，这可能会存在相同文件名称的文件分别放在不同的文件夹下面，当以文件名称设置组件名称时，若文件名称相同，会导致组件名称重复，进而在开发人员使用组件时，会导致使用错误的组件。基于上述问题，本技术提出了对应任一组件来说，当获取组件对应的文件的目标文件名称之后，将这一目标文件名称与所有其他文件名称进行比较，判断是否存在与目标文件名称相同的文件名称，若存在与目标文件名称相同的文件名称，为了避免组件名称重复，便于对组件进行区分，则不以该目标文件名称作为组件的组件名称，此时获取组件所在的文件夹的目标文件夹名称，将目标文件夹名称和目标文件名称相结合，例如以“文件夹名称-文件名称”的方式，设置组件名称。
87.通过上述方式，在生成组件名称之前，对任一组件对应文件的目标文件名称进行重复性判断，避免对组件与其他组件的命名重复，进而避免了名称上的混乱，提高了开发的正确性。
88.206、根据目标文件名称，生成组件的组件名称。
89.在该步骤中，当判断目标文件名称与其他文件名称都不相同时，说明其他文件夹中没有与该文件名称重复的文件名称，此时可以直接将目标文件名称作为组件的组件名
称。
90.在本技术实施例中，可选地，步骤206中，也即根据目标文件名称，生成组件的组件名称，具体还包括：根据目标文件名称，确定每个组件的name属性的属性值；根据属性值，对name属性赋值，作为组件的组件名称。
91.在该实施例中，前端框架vue版本主要有2.x和3.x，vue2.x和vue3.x通常采用不同的组件名称设置方式，即vue框架不同版本设置组件名称方法存在差异性，设置过程较为复杂。因此，本技术中对于vue项目中，对于功能性组件和页面组件设置组件名称时，给每个组件加上name属性，可以利用name属性作为组件名称，进而在组件选项时起作用。具体地，在确定每个组件对应文件的目标文件名称后，将目标文件名称作为name属性值，对name属性进行赋值，然后给每个组件加上赋值后的name属性，使得组件的name属性名等于文件的目标文件名称。
92.通过上述方式，解决了vue框架不同版本设置组件名称存在差异性的问题，同时，无需前端开发人员手动设置，减少了前端开发人员为每个组件设置组件名称的重复工作，实现了自动化设置，节省了开发时间，有效提高了整体开发效率。
93.207、根据多个项目信息，确定组件引入方法。
94.208、利用组件引入方法，在多个组件中，确定多个目标组件。
95.在步骤207和步骤208中，在vue项目中，前端页面都是由页面组件生成的，因此页面组件会有跳转的逻辑，需要给页面组件设置路由名，以便于跳转。在路由配置文件时，需要引入vue项目中pages文件夹下的所有组件文件，其中，不同组件通常会统一放在大的文件夹下面，在确定页面组件过程中，需要引入文件夹下所有的页面组件，若对所有的页面组件一个一个筛选再一个一个引入的方式，花费时间较长，效率较低。因此，本技术提出了提前设置不同的组件引入方法，利用引入方法，快速地引入所有页面组件。具体地，多个项目信息包括vue项目的打包工具，打包工具的不同对应的引入方法不同，因此根据不同的打包工具确定页面组件的组件引入方法，进而利用组件引入方法，在所有组件中，提取出所有的页面组件，即目标组件。
96.在具体实施例中，若vue项目中页面组件文件夹叫view，文件夹中包含a.view1；b.view1；c.view1三个文件，即a、b、c三个组件。当确定vue项目的打包工具为webpack后，即可确定组件引入方法为require.context。其后，传入view文件夹的路径，进而查找子目录，然后，匹配文件的正则表达式，即.view，此时只需要查找文件夹下所有以.view结尾的文件，就能找到所有.view的组件。这样就能形成组件数组，列举组件名称abc，以确定组件路由的路由名称。
97.在本技术实施例中，可选地，步骤207中，也即根据多个项目信息，确定组件引入方法，具体还包括：根据预设路由打包工具，确定目标项目对应的组件引入方法。
98.在该实施例中，多个项目信息包括预设路由打包工具，在vue项目开发过程中，会设置一个文件包含所有安装的工具，其中就包含开发人员选择的预设路由打包工具，而不同的打包工具所对应的组件引入方法是不同的。例如，如果预设打包工具为webpack，则需使用require.context引入方法；如果预设打包工具为vite，则需要使用import.meta.glob引入方法。因此，根据目标项目中提前设定好的打包工具，来确定其对应的组件引入方法。进而利用组件引入方法，确定出所有页面组件。
99.209、获取每个目标组件的目标组件名称。
100.210、根据目标组件名称，确定目标组件名称对应的组件路由的name属性的属性值。
101.211、根据属性值，对name属性赋值，作为组件路由的路由名称。
102.在步骤209至步骤211中，利用组件引入方法在所有组件中确定出多个页面组件后，获取每个目标组件的目标组件名称，将目标组件名称，作为对应的组件路由路由名称，使得vue项目中的文件名称、组件名称和组件路由名称进行统一。具体地，在对组件路由加入name属性后，将该组件路由对应的组件的目标组件名称作为name属性的属性值，进而根据属性值对name属性进行赋值，使得路由name属性值等于页面组件的name属性值，这样在页面跳转的时候，直接使用路由名称，即name属性值就可以了。
103.通过上述方式，使得组件名称和路由名称是相同的，都等于组件的文件名称，统一了名称，进而使得前端开发人员查找组件时，直接通过组件的文件名就知道了组件的组件名称和路由名称，避免了名称上的混乱，确保组件跳转的准确性。
104.在具体实施例中，提供了一种自动化设置组件名称和路由名称方法。在实际应用中，现在前端开发人员在使用vue框架时都会进行组件化开发。前端框架vue版本主要有2.x和3.x。vue3.x相比于vue2.x有很多的改动点，特别是设置组件名这一块。在使用vue3.x和vue2.x时，都是需要前端开发人员在每个组件中自己设置组件名，以便于一个组件在使用另一个组件时，方便根据组件名来进行引入，所以组件名的设置是前端项目开发中很重要的一环。在开发过程中，需要前端开发人员在每个组件中自己写组件名。如果项目很大，组件很多，开发量就会很大，且容易造成组件名重复。此外，在路由配置文件中，需要为每个跳转页面组件设置路由名称，用于页面跳转时用。如果组件名和路由名不一致，就会出现混乱的情况，还需要花时间去把路由名和组件名一一对应起来。
105.基于上述问题，本技术实施例提出了一种自动化设置组件名称和路由名称方法，使得前端开发人员在开发vue项目的时候，不需要手动在每个组件中设置组件名称，同时，不需要在路由配置文件中手动设置每一个页面组件的路由名称，会自动化设置组件名称和路由名称。解决了vue版本不同，设置组件名方式不同的问题。使得设置的组件名称和路由名称最后是相同的，都等于组件的文件名，统一了名称。通过这样设置，便于前端开发人员查找组件时，直接通过组件的文件名就知道了组件的组件名称和路由名称，避免了名称上的混乱。
106.具体地，在vue项目中，功能性组件会放在components文件夹中，页面组件会放在pages文件夹中，前端页面都是由页面组件生成的，所以页面组件会有跳转的逻辑，需要给页面组件设置路由名，以便于跳转。功能性组件和页面组件设置组件名称方法为：获取每个组件的文件名称，例如，文件a.vue，文件名称就叫a。然后给每个组件加上name属性，使name属性名称等于文件名称。如果有文件名相同的，name属性名等于这个文件所在的文件夹名称-文件名称。设置完成之后，每个组件的name属性名称，即组件名称都是文件名称或者文件夹名称-文件名称。
107.进一步地，在路由配置文件中，引入pages文件夹下的所有组件文件来设置路由名称。具体地，首先判断目标项目使用的是打包工具是vite还是webpack，如果是webpack，使用require.context；如果是vite，使用import.meta.glob。通过循环遍历每个页面组件，在
给每个页面组件设置路由名称时，直接让路由name属性值等于页面组件的name属性值，这样名称就统一了。页面跳转的时候，直接使用路由名称，即name属性值就可以了。
108.通过上述方式，一方面，实现了自动化设置vue项目中的组件名和路由配置文件中的组件路由名，不需要手动设置了，减少了前端开发人员为每个组件设置组件名和为每个页面组件设置路由名的重复工作，减少开发人员工作量；另一方面，解决了vue框架不同版本设置组件名方法的差异，对vue项目中的组件名和组件路由名进行了统一，避免了名称的不统一导致的混乱，降低了开发出错的概率，节省了开发时间，提高了开发效率。
109.进一步地，作为图1所述方法的具体实现，本技术实施例提供了一种组件名称的设置装置300，如图3所示，该装置包括：
110.获取模块301，用于获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；
111.第一确定模块302，用于根据多个项目信息，确定每个组件的组件名称；
112.第二确定模块303，用于根据多个项目信息，在多个组件中，确定多个目标组件；
113.第三确定模块304，用于根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称。
114.可选地，多个项目信息包括每个文件的文件名称，第一确定模块302，具体用于：
115.对于任一组件，根据多个项目，确定组件所在的文件的目标文件名称；
116.根据目标文件名称，确定组件的组件名称。
117.可选地，该装置还包括：
118.判断模块305，用于在多个文件名称中，判断目标文件名称与除目标文件名称外的其余名称是否相同。
119.可选地，301，具体还用于：
120.若相同，获取组件所在的文件夹的目标文件夹名称。
121.可选地，该装置还包括：
122.第一生成模块306，用于根据目标文件夹名称和目标文件名称，生成组件的组件名称。
123.可选地，该装置还包括：
124.第二生成模块307，用于若不相同，根据目标文件名称，生成组件的组件名称。
125.可选地，第二生成模块307，具体用于：
126.根据目标文件名称，确定每个组件的name属性的属性值；
127.根据属性值，对name属性赋值，作为组件的组件名称。
128.可选地，第二确定模块303，具体用于：
129.根据多个项目信息，确定组件引入方法；
130.利用组件引入方法，在多个组件中，确定多个目标组件。
131.可选地，第三确定模块304，具体用于：
132.获取每个目标组件的目标组件名称；
133.根据目标组件名称，确定目标组件名称对应的组件路由的name属性的属性值；
134.根据属性值，对name属性赋值，作为组件路由的路由名称。
135.根据路由打包工具，确定目标项目对应的组件引入方法。
136.可选地，多个项目信息还包括预设路由打包工具，该装置还包括：
137.第四确定模块308，用于根据预设路由打包工具，确定目标项目对应的组件引入方法。
138.本技术实施例提供的组件名称的设置装置300，相较于现有技术中，通过前端开发人员手动设置组件名称以及路由名称，开发人员工作量大，花费时间较多，且不同开发人员分别设置容易造成组件名称重复，开发错误率较高。此外，若组件名称与路由名称设置不一致，易出现混乱，还需要开发人员花时间将路由名称与组件名称一一对应起来，开发效率较低的技术问题，提出了自动将vue项目中每个组件所在文件的文件名称，设置为该组件的组件名称，以及该组件的组件路由的路由名称。一方面，通过自动化配置vue项目中的组件名称和配置路由文件中的组件路由名称，无需前端开发人员手动设置，降低开发人员工作量的同时，节省了开发时间，有效提高开发效率；另一方面，对vue项目中的组件名称和组件路由名称进行了统一，都采用组件文件名称，避免了名称的不统一导致的混乱，使得开发人员在使用组件时，根据组件文件名称，立刻就能知道这个组件的组件名称和组件路由名称，降低了开发出错的概率，有效提高了开发的准确性。
139.在示例性实施例中，本技术还提供了一种电子设备，包括存储器和处理器。该存储器存储有计算机程序，处理器，用于执行存储器上所存放的程序，执行上述实施例中的组件名称的设置方法。
140.在示例性实施例中，本技术还提供了一种可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现所述的组件名称的设置方法的步骤。
141.通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本技术可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现。基于这样的理解，本技术的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中，包括若干指令用以使得一台电子设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施场景所述的方法。
142.本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的模块或流程并不一定是实施本技术所必须的。
143.本领域技术人员可以理解实施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。
144.上述本技术序号仅仅为了描述，不代表实施场景的优劣。
145.以上公开的仅为本技术的几个具体实施场景，但是，本技术并非局限于此，任何本领域的技术人员能思之的变化都应落入本技术的保护范围。

技术特征：
1.一种组件名称的设置方法，其特征在于，包括：获取目标项目的多个项目信息，其中，所述目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；根据所述多个项目信息，确定每个组件的组件名称；根据所述多个项目信息，在多个组件中，确定多个目标组件；根据所述每个组件的所述组件名称，确定每个目标组件的组件路由的路由名称。2.根据权利要求1所述的方法，其特征在于，所述多个项目信息包括每个文件的文件名称，所述根据所述多个项目信息，确定每个组件的组件名称的步骤，具体包括：对于任一组件，根据所述多个项目，确定组件对应的文件的目标文件名称；根据所述目标文件名称，确定所述组件的组件名称。3.根据权利要求2所述的方法，其特征在于，所述根据所述目标文件名称，确定所述组件的组件名称的步骤，具体包括：在所述多个文件名称中，判断所述目标文件名称与除所述目标文件名称外的其余名称是否相同；若相同，获取所述组件所在的文件夹的目标文件夹名称；根据所述目标文件夹名称和所述目标文件名称，生成所述组件的所述组件名称；若不相同，根据所述目标文件名称，生成所述组件的所述组件名称。4.根据权利要求3所述的方法，其特征在于，所述根据所述目标文件名称，生成所述组件的所述组件名称的步骤，具体包括：根据所述目标文件名称，确定所述每个组件的name属性的属性值。根据所述属性值，对所述name属性赋值，作为所述组件的所述组件名称。5.根据权利要求1所述的方法，其特征在于，所述根据所述多个项目信息，在多个组件中，确定多个目标组件的步骤，具体包括：根据所述多个项目信息，确定组件引入方法；利用所述组件引入方法，在所述多个组件中，确定所述多个目标组件。6.根据权利要求5所述的方法，其特征在于，所述根据所述每个组件的所述组件名称，确定每个目标组件的组件路由的路由名称的步骤，具体包括：获取每个目标组件的目标组件名称；根据所述目标组件名称，确定所述目标组件名称对应的组件路由的name属性的属性值；根据所述属性值，对所述name属性赋值，作为所述组件路由的所述路由名称。根据所述路由打包工具，确定所述目标项目对应的所述组件引入方法。7.根据权利要求5所述的方法，其特征在于，所述多个项目信息还包括预设路由打包工具，所述根据所述多个项目信息，确定组件引入方法的步骤，具体包括：根据所述预设路由打包工具，确定所述目标项目对应的所述组件引入方法。8.一种组件名称的设置装置，其特征在于，包括：获取模块，用于获取目标项目的多个项目信息，其中，所述目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；第一确定模块，用于根据所述多个项目信息，确定每个组件的组件名称；
第二确定模块，用于根据所述多个项目信息，在多个组件中，确定多个目标组件；第三确定模块，用于根据所述每个组件的所述组件名称，确定每个目标组件的组件路由的路由名称。9.一种电子设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。10.一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

技术总结
本申请公开了一种组件名称的设置方法、装置、电子设备及可读存储介质，方法包括：获取目标项目的多个项目信息，其中，目标项目中包括多个文件夹，每个文件夹中包括多个文件，每个文件中包括一个组件；根据多个项目信息，确定每个组件的组件名称；根据多个项目信息，在多个组件中，确定多个目标组件；根据每个组件的组件名称，确定每个目标组件的组件路由的路由名称。通过上述方法，一方面，通过自动化配置Vue项目中的组件名称和配置路由文件中的组件路由名称，无需前端开发人员手动设置，节省了开发时间；另一方面，对Vue项目中的组件名称和组件路由名称进行了统一，避免了名称的不统一导致的混乱，降低了开发出错的概率，有效提高了开发的准确性。了开发的准确性。了开发的准确性。


技术研发人员：时小琳
受保护的技术使用者：平安国际融资租赁有限公司
技术研发日：2023.04.18
技术公布日：2023/7/25