基于Vue框架生成开发模板文件方法、装置、设备及介质

摘要

本申请实施例公开了一种基于Vue框架生成开发模板文件方法、装置、设备及介质，所述方法包括：获取创建目标功能模块的第一指令；提取所述第一指令中的第一脚本参数；在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发所述目标功能模块所需的网页模板文件，所述第二目标文件为开发所述目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

说明书

技术领域

本申请涉及计算机技术领域，尤其涉及一种基于Vue框架生成开发模板文件方法、装置、设备及介质。

背景技术

前端开发工作中，各类脚手架工具帮助解决了项目的基础结构搭建问题。然而日常开发过程中，每新增一个前端页面就需要相应地增加该页面的初始化代码，相同文件类型的初始代码又往往是一样的。以Vue开发框架为例，通常包括.vue模板文件、.less或.sass等css预处理语言文件。同时还需要增加对应的页面路由以及初始化模板代码。这些工作都是非常繁琐且重复性极高的，开发效率低。

发明内容

本申请实施例的主要目的在于提供一种基于Vue框架生成开发模板文件方法、装置、设备及介质，能够有效地减少每新增页面就重复添加类似代码的重复性劳动，提高了页面开发的效率。

第一方面，本申请实施例提供了一种基于Vue框架生成开发模板文件方法，应用于电子设备，所述方法包括：

获取创建目标功能模块的第一指令；

提取所述第一指令中的第一脚本参数；

在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；

在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发所述目标功能模块所需的网页模板文件，所述第二目标文件为开发所述目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。

第二方面，本申请实施例提供了一种基于Vue框架生成开发模板文件装置，所述装置包括：

获取单元，用于获取创建目标功能模块的第一指令；

提取单元，用于提取所述第一指令中的第一脚本参数；

创建单元，用于在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；

所述创建单元，以及用于在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发所述目标功能模块所需的网页模板文件，所述第二目标文件为开发所述目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。

第三方面，本申请实施例提供了一种电子设备，包括处理器、存储器、通信接口以及一个或多个程序，其中，上述一个或多个程序被存储在上述存储器中，并且被配置由上述处理器执行，上述程序包括用于执行本申请实施例第一方面任一方法中的步骤的指令。

第四方面，本申请实施例提供了一种计算机可读存储介质，其中，上述计算机可读存储介质存储用于电子数据交换的计算机程序，其中，上述计算机程序使得计算机执行如本申请实施例第一方面任一方法中所描述的部分或全部步骤。

第五方面，本申请实施例提供了一种计算机程序产品，其中，上述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，上述计算机程序可操作来使计算机执行如本申请实施例第一方面任一方法中所描述的部分或全部步骤。该计算机程序产品可以为一个软件安装包。

可以看出，本申请实施例提供了一种基于Vue框架生成开发模板文件方法、装置、设备及介质，所述方法包括：获取创建目标功能模块的第一指令；提取所述第一指令中的第一脚本参数；在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发所述目标功能模块所需的网页模板文件，所述第二目标文件为开发所述目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1A为本申请实施例提供的生成目标功能模块的模板文件的流程示意图；

图1B为本申请实施例提供的生成新建页面的模板文件的流程示意图；

图2为本申请实施例提供的一种基于Vue框架生成开发模板文件方法的流程示意图；

图3为本申请实施例提供的一种基于Vue框架生成开发模板文件方法的流程示意图；

图4是本申请实施例提供的一种电子设备的结构示意图；

图5是本申请实施例提供的一种基于Vue框架生成开发模板文件装置的功能单元组成框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

前端开发工作中，各类脚手架工具(如Vue框架的@vue/cli、React框架的create-react-app)帮助解决了项目的基础结构搭建问题。然而日常开发过程中，每新增一个前端页面就需要相应地增加该页面的初始化代码，相同文件类型的初始代码又往往是一样的。以Vue开发框架为例，通常包括.vue模板文件、.less或.sass等css预处理语言文件。同时还需要增加对应的页面路由，比如在路由文件router.js中新增路由代码。这些工作都是非常繁琐且重复性极高的。

针对此类问题，借鉴脚手架工具(如Vue脚手架工具@vue/cli中的vue create命令)的思想，根据项目仓库代码结构自定义出一套适配的自动化脚本工具，通过执行一行命令的形式自动生成适配当前仓库代码结构的初始化代码及文件，以减少目前每新增页面就重复添加类似代码的重复性劳动。

图1A为本申请实施例提供的一种生成目标功能模块的模板文件的流程示意图；如图1A所示，电子设备启动目标功能模块对应的脚本，读取脚本的第一脚本参数；判断第一脚本参数是否合法；若第一脚本参数不合法，则失败退出；若第一脚本参数合法，则根据第一脚本参数创建第一项目文件夹；在第一项目文件夹中创建空的目标文件夹，读取第二项目文件夹中第一模板文件夹中的模板文件，生成有初始化内容的第一网页文件(第一App.vue文件)和路由文件(router.js文件)。

如图1B所示，图1B为本申请实施例提供的一种生成新建页面的模板文件的流程示意图；电子设备启动新建页面对应的脚本，读取脚本的第二脚本参数；判断第二脚本参数是否合法；若第二脚本参数不合法，则失败退出；若第二脚本参数合法，则根据第二脚本参数查找网页对应的路径，在目标文件夹中创建页面文件夹；在页面文件夹中创建图像文件夹，读取第二项目文件夹中第二模板文件夹中的模板文件，生成有初始化内容的模块风格文件(style.less文件)，读取第二模板文件夹中的模板文件的内容替换名称参数生成有初始化内容的第一网页文件(第一App.vue文件)；根据第二脚本参数在第一项目文件夹中的路由文件中添加新页面的路由，生成新的路由文件。

下面对本申请实施例进行详细介绍。

为解决每新增页面就重复添加类似代码的重复性劳动的问题，本申请提供了一种基于Vue框架生成开发模板文件方法，应用于电子设备，具体如图2所示，该方法可以包括但不限于如下步骤：

S201、电子设备获取创建目标功能模块的第一指令；

具体地，电子设备获取创建目标功能模块的第一指令，包括：在启动目标功能模块module脚本时，获取创建目标功能模块的第一指令。

具体地，在电子设备获取创建目标功能模块的第一指令之前，还包括：创建第二项目文件夹；在第二项目文件夹中添加第一模板文件夹和第二模板文件夹；在第一模板文件夹写入第一网页文件、路由文件；在第二模板文件夹中写入第二网页文件和模块风格文件。便于提高后续自动生成目标功能模块或目标功能模块下新建页面所需的模板文件，提高生成模板文件的效率。

其中，第一模板文件夹用于存放新建模块的模板文件，第二模板文件夹用于存放新建页面的模板文件。在第二项目文件夹中添加第一模板文件夹和第二模板文件夹时，第一模板文件夹和第二模板文件夹均为任意的空文件夹。第二项目文件夹中模板文件为预设的模板文件。

例如，创建bin文件夹，在bin文件夹中添加相关模板文件module-template文件夹(第一模板文件夹)、page-template文件夹(第二模板文件夹)；在module-template文件夹中写入第一网页文件(第一App.vue文件)、路由文件(第一router.js文件)，page-template文件夹中写入第二网页文件(第二App.vue文件)、模块风格文件(style.less文件)，第二App.vue文件中组件名name变量值以{{name}}写入，方便后续进行替换。

其中，App.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件，所有页面都是在App.vue下进行切换的。是整个项目的关键，App.vue负责构建定义及页面组件归集。router.js文件用于存放路由。style.less文件用于存放页面样式。

S202、电子设备提取第一指令中的第一脚本参数；

其中，第一脚本参数包括：目标功能模块的标签参数和目标功能模块的第一名称参数，目标功能模块的标签参数为target参数，第一名称参数为name参数。target参数用于确定目标功能模块(新模块)是否属于目标业务模块，name参数用于确定目标功能模块的模块名。

具体地，电子设备提取第一指令中的第一脚本参数，包括：在目标功能模块(新模块)创建node脚本中，通过process.argv获取用户运行命令时传入的target参数和name参数。

其中，process是node中的一个模块，通过访问process.argv我们能轻松愉快的接收通过命令执行node程序时候所传入的参数。node是一个开发代码的运行平台。

S203、电子设备在第一脚本参数满足第一条件的情况下，则根据第一脚本参数创建第一项目文件夹；

其中，第一条件包括多个子条件，例如，第一条件包括第一子条件和第二子条件，第一子条件可以是：target参数满足预设target参数的正则表达式规则，第二子条件为name参数满足预设name参数的正则表达式规则，第一条件可以是：target参数满足预设target参数的正则表达式规则，且name参数满足预设name参数的正则表达式规则，第一条件还可以是其他限制第一脚本参数的要求，此处不作过多的限制。

具体地，电子设备在第一脚本参数满足第一条件的情况下，则根据第一脚本参数创建第一项目文件夹之前，还包括：判断第一脚本参数是否满足第一条件。

进一步地，判断第一脚本参数是否满足第一条件，包括：

判断第一脚本参数中的target参数是否满足预设target参数的正则表达式规则；

若target参数满足预设target参数的正则表达式规则，则第一脚本参数中的target参数匹配成功，即第一脚本参数中的target参数合法；

若target参数不满足预设target参数的正则表达式规则，则匹配不成功，即第一脚本参数中的target参数不合法；

判断第一脚本参数中的name参数是否满足预设name参数的正则表达式规则；

若name参数满足预设name参数的正则表达式规则，则第一脚本参数中的name参数匹配成功，即第一脚本参数中的name参数合法；

若name参数不满足预设name参数的正则表达式规则，则匹配不成功，即第一脚本参数中的name参数不合法；

若第一脚本参数中的target参数匹配成功且第一脚本参数中的name参数匹配成功，则确定第一脚本参数满足第一条件。确保第一脚本参数满足第一条件，便于后续根据第一脚本参数创建第一项目文件夹中脚本参数不出错。

其中，预设target参数的正则表达式规则可以是限制target参数的长度小于或等于10位的英文字符串，预设target参数的正则表达式规则还可以是其他的正则表达式规则，此处仅仅是举例说明，不作过多的限制。预设name参数的正则表达式规则可以是限制name参数的长度小于或等于10位的英文字符串，预设name参数的正则表达式规则还可以是其他的正则表达式规则，此处仅仅是举例说明，不作过多的限制。

具体地，电子设备在第一脚本参数满足第一条件的情况下，则根据第一脚本参数创建第一项目文件夹，包括：在标签参数和第一名称参数均满足第一条件情况下，根据标签参数确定目标功能模块所属的业务模块；根据第一名称参数确定业务模块的模块名；根据业务模块以及模块名，在业务模块对应的文件夹中创建第一项目文件夹。即：根据target参数确定目标功能模块(新模块)所属的业务模块，根据name参数确定业务模块的模块名，根据所属的业务模块以及模块名在业务模块文件夹中创建第一项目文件夹。

其中，业务模块与业务模块文件夹一一对应。第一脚本参数包括目标功能模块的标签参数和目标功能模块的第一名称参数。

例如，根据target参数确认新模块属于xxxx1业务模块，根据name参数确定模块名为example；利用mkdir-p工具在xxxx1文件夹中创建example空文件夹。mkdir-p工具用于创建多级目录，递归创建目录，即使上级目录不存在，会按目录层级自动创建目录。

例如当模块名为example时，可以根据name参数确定模块名为example。

S204、电子设备在第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹。

其中，第一目标文件为开发业务模板所需的网页模板文件，第二目标文件为开发模板所需的路由模板文件，目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。

具体地，电子设备在第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，包括：根据第二项目文件夹中的模板文件在第一项目文件夹中创建第一目标文件和第二目标文件，第二项目文件夹的模板文件为用于生成目标功能模块所需的模板文件。

例如，在第一项目文件夹中创建目标文件夹；循环第二项目文件夹中的第一模板文件夹中的模版文件，其中，第一模板文件夹中的模版文件包括：第一网页文件(第一App.vue文件)、路由文件(第一router.js文件)，通过fs.readFileSync方法以utf-8格式读取各模板文件内容，在回调函数中调用fs.writeFileSync方法将读取到第一App.vue文件以及路由文件的模板内容在第一项目文件夹中写出同名文件，即第一目标文件、第二目标文件。便于确保创建出来的文件命名方式、路由命名方式等符合代码库统一的风格规范，解决部分eslint校验工具无法约束的地方，提高同代码库多人开发过程中代码各处命名风格的统一性。

其中，fs.readFileSync方法用于读取json文件的文件内容，回调函数是指fs.readFileSync()。fs.writeFileSync方法用于写入json文件的文件内容。

举例说明，利用mkdir-p工具在第一项目文件夹(example空文件夹)中再创建views空文件夹；循环bin文件夹中module-template里的模版文件，通过fs.readFileSync方法以utf-8格式读取各模板文件内容，在回调函数中调用fs.writeFileSync方法将读取到的模板内容在views空文件夹写出同名文件，即第一目标文件(第三App.vue文件)、第二目标文件(第二router.js文件)。

其中，第三App.vue文件的文件内容与第一App.vue文件内容相同，第三App.vue文件的文件名称与第一App.vue文件的名称相同。第二router.js文件的文件内容与第一router.js文件的文件内容相同，第二router.js文件的文件名称与第一router.js文件的名称相同。

又例如，当自动化生成命令命名为create:module时，使用第一命令行在业务模块文件夹(xxxx1)中创建新模块(example)并根据name参数进行命名。利用提出的脚本命令能够实现一行命令生成想要的代码模板、以及插入对应的访问路由，极大地方便了日常开发，让计算机自己去干繁琐的工作，节省出大量的时间对差别化的业务功能做优化。

第一命令行可以是：

npm run create:module--target＝xxxx1--name＝example。

其中，命令create:module用于创建新模块，将第一命令添加在package.json中，运行对应node脚本文件。

具体地，在第一项目文件夹中创建第一文件、第二文件以及目标文件夹之后，还包括：获取在目标功能模块下新建页面的第二指令；获取第二指令中的第二脚本参数；在第二脚本参数满足第二条件的情况下，根据第二脚本参数，确定新建页面所属的业务项目中的功能模块；根据第二脚本参数确定新建页面的页面名；根据新建页面所属的业务项目中的功能模块以及页面名，在目标文件夹中创建新建页面对应的页面文件夹；在页面文件夹中创建图像文件夹。在页面文件夹中创建图像文件夹便于后续存放页面设计所需的图片。电子设备根据新建页面所属的业务项目中的功能模块以及页面名，在目标文件夹中创建新建页面对应的页面文件夹，能够实现一行命令生成想要的代码模板、以及插入对应的访问路由，极大地方便了日常开发。

其中，第二脚本参数包括：路径参数(path参数)、页面名称参数(name参数)、标题参数(title参数)。

举例说明，在新建页面创建node脚本中，通过process.argv获取用户运行时传入的path、name、title参数；判断path、name、title参数是否合法；若是，则根据path参数确认新建页面属于业务项目xxxx1中的example模块，根据name参数确定新建页面的页面名为pageFolder；依赖mkdirp工具在路径xxxx1/example路径下创建名为pageFolder的页面文件夹，在页面文件夹中再创建图像文件夹(例如images空文件夹)。

其中，判断path、name、title参数是否合法，可以是：

判断第二脚本参数中的path参数是否满足预设path参数的正则表达式规则；

若path参数满足预设path参数的正则表达式规则，则第二脚本参数中的path参数匹配成功，即第二脚本参数中的path参数合法；

若path参数不满足预设path参数的正则表达式规则，则匹配不成功，即第二脚本参数中的path参数不合法；

判断第二脚本参数中的name参数是否满足预设name参数的正则表达式规则

若name参数满足预设name参数的正则表达式规则，则第二脚本参数中的name参数匹配成功，即第二脚本参数中的name参数合法；

若name参数不满足预设name参数的正则表达式规则，则匹配不成功，即第二脚本参数中的name参数不合法；

判断第二脚本参数中的title参数是否满足预设title参数的正则表达式规则

若title参数满足预设title参数的正则表达式规则，则第二脚本参数中的title参数匹配成功，即第二脚本参数中的title参数合法；

若title参数不满足预设title参数的正则表达式规则，则匹配不成功，即第二脚本参数中的title参数不合法；

若第二脚本参数中的path参数匹配成功且第二脚本参数中的name参数匹配成功、且第二脚本参数中的title参数匹配成功，则确定path、name、title参数合法，即确定第二脚本参数合法。

其中，预设path参数的正则表达式规则可以是根据新建页面的需求进行设置的规则，此处不作过多的限制。预设name参数的正则表达式规则可以是根据新建页面的需求进行设置的规则，此处不作过多的限制。预设title参数的正则表达式规则可以是根据新建页面的需求进行设置的规则，此处不作过多的限制。

其中，创建新建页面的自动化生成命令命名可以是create:page，将命令添加在package.json文件中，运行对应新建页面的node脚本文件；使用第二命令行在目标功能模块(example模块)中添加新页面，传入路径、新页面命名、页面title参数。

第二命令行可以是：

npm run create:page--path＝xxxx1/example--name＝pageFolder--title＝loginPage。

进一步地，根据新建页面所属的业务项目中的功能模块以及页面名，创建新建页面对应的页面文件夹之后，还包括：根据第二项目文件夹中的模块风格文件的文件内容，在页面文件夹中确定第三目标文件；根据第二项目文件夹中的第二网页文件中的模板文件内容、新建页面的页面名，确定第四目标文件；根据第一项目文件夹下的第二目标文件的内容、新建页面的路由确定第一项目文件夹的第五目标文件。

例如，循环第二项目文件夹中的第二模板文件夹中的模版文件，读取第二模板文件夹中的style.less文件的文件内容，将读取到的style.less文件的模板内容在页面文件夹中写出同名文件，即页面文件夹中的第三目标文件；读取第二模板文件夹中第二App.vue文件中的模板文件内容时，将内容中的{{name}}替换为新建页面的页面名，得到页面文件夹中的第四目标文件；在目标功能模块(example模块)对应的第一项目文件夹下的第二router.js文件中添加新建页面的路由；读出目标功能模块下的第二router.js文件内容，获取路由数组，根据新建页面的页面名及路径在路由数组中追加新建页面的页面相关信息，替换第二router.js文件内容，写出第三router.js文件，即页面文件夹中的第五目标文件。确保创建出来的文件命名方式、路由命名方式等符合代码库统一的风格规范，解决部分eslint校验工具无法约束的地方，提高同代码库多人开发过程中代码各处命名风格的统一性。

其中，页面相关信息包括新建页面的页面名及新建页面对应页面文件夹的路径。

举例说明：在创建新建页面对应的页面文件夹之后，还包括：

步骤1：循环第二项目文件夹中的第二模板文件夹中的模版文件，其中，第二模板文件夹中的模版文件包括：第二App.vue文件、style.less文件，通过fs.readFileSync方法以utf-8格式读取style.less文件的文件内容，在回调函数中调用fs.writeFileSync方法将读取到的style.less文件的模板内容在页面文件夹中写出同名文件；

步骤2：读取第二App.vue文件中的模板文件内容时，将内容中的{{name}}替换为新页面名pageFolder；

步骤3：在example模块下的router.js文件中添加新页面的路由；利用fs.readFileSync方法读出example模块下的router.js文件内容，获取路由数组(即routes数组)，也就是‘routes:[’与‘]’之间的内容；

步骤4：根据新页面名及路径在现有routes数组中追加新页面相关信息，替换原文件内容，fs.writeFileSync方法写出新的router.js文件。

可以看出，本申请实施例提供了一种基于Vue框架生成开发模板文件方法、装置、设备及介质，所述方法包括：获取创建目标功能模块的第一指令；提取所述第一指令中的第一脚本参数；在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发业务模板所需的网页模板文件，所述第二目标文件为开发模板所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

下面通过一个具体的例子对本申请实施例进行详细介绍。

与上述图2所示的实施例一致，请参阅图3，图3是本申请实施例提供的一种基于Vue框架生成开发模板文件方法的流程示意图，应用于电子设备，所述方法包括：

S301、电子设备获取创建目标功能模块的第一指令；

S302、电子设备提取第一指令中的第一脚本参数；

S303、在第一脚本参数满足第一条件的情况下，则电子设备根据第一脚本参数创建第一项目文件夹；

S304、电子设备在第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹；

其中，第一目标文件为开发目标功能模块所需的网页模板文件，第二目标文件为开发目标功能模块所需的路由模板文件，目标文件夹用于存放目标功能模块下的新建页面所需的模板文件。

S305、电子设备获取在目标功能模块下新建页面的第二指令；获取第二指令中的第二脚本参数；

S306、在第二脚本参数满足第二条件的情况下，电子设备根据第二脚本参数，确定新建页面对应的功能模块；

S307、电子设备根据第二脚本参数确定新建页面的页面名；根据新建页面所属的业务项目中的功能模块以及页面名，创建新建页面对应的页面文件夹；在页面文件夹中创建图像文件夹。

可以看出，本申请实施例获取创建目标功能模块的第一指令；提取第一指令中的第一脚本参数；在第一脚本参数满足第一条件的情况下，则电子设备根据第一脚本参数创建第一项目文件夹；在第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹；获取在目标功能模块下新建页面的第二指令；获取第二指令中的第二脚本参数；在第二脚本参数满足第二条件的情况下，根据第二脚本参数，确定新建页面对应的功能模块；根据第二脚本参数确定新建页面的页面名；根据新建页面所属的业务项目中的功能模块以及页面名，创建新建页面对应的页面文件夹；在页面文件夹中创建图像文件夹。减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

请参阅图4，图4是本申请实施例提供的一种电子设备400的结构示意图，如图所示，所述电子设备400包括应用处理器410、存储器420、通信接口430以及一个或多个程序421，其中，所述一个或多个程序421被存储在上述存储器420中，并且被配置由上述应用处理器410执行，所述一个或多个程序421包括用于执行以下步骤：

获取创建目标功能模块的第一指令；

提取所述第一指令中的第一脚本参数；

在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；

在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发目标功能模块所需的网页模板文件，所述第二目标文件为开发目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。

在一个可能的示例中，所述第一脚本参数包括所述目标功能模块的标签参数和所述目标功能模块的第一名称参数；在所述第一脚本参数满足第一条件情况下，则根据所述第一脚本参数创建所述第一项目文件夹方面，所述一个或多个程序421包括用于执行以下步骤：在所述标签参数和所述第一名称参数均满足第一条件情况下，根据所述标签参数确定目标功能模块所属的业务模块；根据所述第一名称参数确定所述业务模块的模块名；根据所述业务模块以及所述模块名，在所述业务模块对应的文件夹中创建第一项目文件夹。

在一个可能的示例中，在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹方面，所述一个或多个程序421包括用于执行以下步骤：根据第二项目文件夹中的模板文件在所述第一项目文件夹中创建所述第一目标文件和所述第二目标文件，所述第二项目文件夹的模板文件用于生成目标功能模块所需的模板文件。

在一个可能的示例中，所述在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹之后，所述一个或多个程序421还包括用于执行以下步骤：获取在所述目标功能模块下新建页面的第二指令；获取所述第二指令中的第二脚本参数；在所述第二脚本参数满足第二条件的情况下，根据所述第二脚本参数，确定所述新建页面对应的功能模块；根据所述第二脚本参数确定所述新建页面的页面名；根据所述新建页面对应的功能模块以及所述页面名，创建所述新建页面对应的页面文件夹；在所述页面文件夹中创建图像文件夹。

在一个可能的示例中，所述根据所述新建页面所属的业务项目中的功能模块以及所述页面名，创建所述新建页面对应的页面文件夹之后，所述一个或多个程序421还包括用于执行以下步骤：根据所述第二项目文件夹中的模块风格文件的文件内容，在所述页面文件夹中确定第三目标文件；根据所述第二项目文件夹中的第二网页文件中的模板文件内容、所述新建页面的页面名，确定第四目标文件；根据所述第一项目文件夹下的第二目标文件的内容、所述新建页面的路由确定所述第一项目文件夹的第五目标文件。

在一个可能的示例中，所述在根据第二项目文件夹中的模板文件在所述第一项目文件夹中创建所述第一目标文件和所述第二目标文件之前，所述一个或多个程序421还包括用于执行以下步骤：创建所述第二项目文件夹；在所述第二项目文件夹中添加第一模板文件夹和第二模板文件夹；在所述第一模板文件夹写入所述第一网页文件、所述路由文件；在所述第二模板文件夹中写入所述第二网页文件和所述模块风格文件。

可以看出，本申请实施例通过获取创建目标功能模块的第一指令；提取所述第一指令对应的第一脚本参数；在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发目标功能模块所需的网页模板文件，所述第二目标文件为开发目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件，减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

上述主要从方法侧执行过程的角度对本申请实施例的方案进行了介绍。可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所提供的实施例描述的各示例的单元及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本申请实施例可以根据上述方法示例对电子设备进行功能单元的划分，例如，可以对应各个功能划分各个功能单元，也可以将两个或两个以上的功能集成在一个处理单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。需要说明的是，本申请实施例中对单元的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

图5是本申请实施例中所涉及的基于Vue框架生成开发模板文件装置500的功能单元组成框图。该装置500包括：

获取单元501，用于获取创建目标功能模块的第一指令；

提取单元502，用于提取所述第一指令中的第一脚本参数；

创建单元503，用于在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；

所述创建单元503，以及用于在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发目标功能模块所需的网页模板文件，所述第二目标文件为开发目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件。

其中，所述装置500还可以包括存储单元504，用于存储电子设备的程序代码和数据。存储单元504可以是存储器。

可以看出，本申请实施例通过获取创建目标功能模块的第一指令；提取所述第一指令的第一脚本参数；在所述第一脚本参数满足第一条件的情况下，则根据所述第一脚本参数创建所述第一项目文件夹；在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹，所述第一目标文件为开发目标功能模块所需的网页模板文件，所述第二目标文件为开发目标功能模块所需的路由模板文件，所述目标文件夹用于存放所述目标功能模块下的新建页面所需的模板文件，减少了大量、繁琐工作的时间，极大地提高了页面开发的效率。

在一个可能的示例中，所述第一脚本参数包括所述目标功能模块的标签参数和所述目标功能模块的第一名称参数；所述创建单元503，具体用于：在所述标签参数和所述第一名称参数均满足第一条件情况下，根据所述标签参数确定目标功能模块所属的业务模块；以及用于根据所述第一名称参数确定所述业务模块的模块名；以及用于根据所述业务模块以及所述模块名，在所述业务模块对应的文件夹中创建第一项目文件夹。

在一个可能的示例中，所述在所述第一项目文件夹中创建第一目标文件、第二目标文件以及目标文件夹之后，所述创建单元503，还用于：获取在所述目标功能模块下新建页面的第二指令；获取所述第二指令中的第二脚本参数；在所述第二脚本参数满足第二条件的情况下，根据所述第二脚本参数，确定所述新建页面对应的功能模块；根据所述第二脚本参数确定所述新建页面的页面名；根据所述新建页面对应的功能模块以及所述页面名，创建所述新建页面对应的页面文件夹；在所述页面文件夹中创建图像文件夹。

在一个可能的示例中，所述根据所述新建页面所属的业务项目中的功能模块以及所述页面名，创建所述新建页面对应的页面文件夹之后，所述创建单元503，还用于：根据所述第二项目文件夹中的模块风格文件的文件内容，在所述页面文件夹中确定第三目标文件；根据所述第二项目文件夹中的第二网页文件中的模板文件内容、所述新建页面的页面名，确定第四目标文件；根据所述第一项目文件夹下的第二目标文件的内容、所述新建页面的路由确定所述第一项目文件夹的第五目标文件。

在一个可能的示例中，所述在根据第二项目文件夹中的模板文件在所述第一项目文件夹中创建所述第一目标文件和所述第二目标文件之前，所述创建单元503，还用于：创建所述第二项目文件夹；在所述第二项目文件夹中添加第一模板文件夹和第二模板文件夹；在所述第一模板文件夹写入所述第一网页文件、所述路由文件；在所述第二模板文件夹中写入所述第二网页文件和所述模块风格文件。

本申请实施例还提供一种计算机存储介质，其中，该计算机存储介质存储用于电子数据交换的计算机程序，该计算机程序使得计算机执行如上述方法实施例中记载的任一方法的部分或全部步骤，上述计算机包括电子设备。

本申请实施例还提供一种计算机程序产品，上述计算机程序产品包括存储了计算机程序的非瞬时性计算机可读存储介质，上述计算机程序可操作来使计算机执行如上述方法实施例中记载的任一方法的部分或全部步骤。该计算机程序产品可以为一个软件安装包，上述计算机包括电子设备。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。

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

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

上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例上述方法的全部或部分步骤。而前述的存储器包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储器中，存储器可以包括：闪存盘、只读存储器(英文：Read-Only Memory，简称：ROM)、随机存取器(英文：Random Access Memory，简称：RAM)、磁盘或光盘等。

以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。