CN106502663A - 一种前端项目框架生成方法 - Google Patents

Abstract

本发明公开了一种前端项目框架生成方法，包括以下步骤：定义项目模板文件；定义交互式命令，包括提示用户输入项目名、提示用户输入项目描述、以及提示用户选择是否需要定制功能；找到存放模板文件的目录，根据用户的输入不同进行不同的处理逻辑，即若判断到没有选择定制化功能，则只复制基本的项目模板文件，包括文档、源代码和配置目录，反之不仅会复制基本项目文件，还会复制带有定制化功能的模板文件到目标目录；根据最终选择生成新项目。本发明能快速搭建前端项目框架，提高效率，节省时间，配置灵活。

Description

一种前端项目框架生成方法

技术领域

本发明涉及项目框架领域，具体涉及一种前端项目框架生成方法。

背景技术

项目的初始框架搭建，需要定义好目录结构，编写程序启动文件、配置文件，启动调试等工作，而这些工作是每个项目初始都必须要做的。项目的数量越多，花费的时间就越长。快速开发是每个企业追求的目标，而快速创建项目是其中的一个关键环节。

前端技术发展很快，已不再仅仅局限于页面展示，前端技术引入了更多其他领域的思想和方法论，从而产生各种框架和新技术，把现有的一些前端新技术整合在一起，让其为创建项目服务，也是各个企业和开发团队要考虑的问题。

现有技术基本上是通过复制老项目的项目框架进行开发，速度慢，技术落后。其创建新项目时，首先复制粘贴老项目的目录，然后在其基础上修改项目中的文件，修改完成后进行新项目的调试，确认没问题之后开始新项目的开发。这种方式的不足之处是：1)速度慢，要手动进行配置文件的修改，删除不必要的文件等，修改完了还需要调试是否有问题。2)技术栈得不到更新，沿用老的项目框架导致只能继续使用原有的技术，一些可以提高开发效率的新技术得不到使用。

发明内容

本发明所要解决的技术问题是提供一种前端项目框架生成方法，通过模板文件生成新项目所需的文件内容，包括项目启动文件，配置文件等，并且在程序中定义好项目的模块和目录结构，让开发团队无需再花时间重新定义整理。

为解决上述技术问题，本发明采用的技术方案是：

一种前端项目框架生成方法，包括以下步骤：

步骤1：定义项目模板文件，包括项目的启动文件、初始页面文件、样式文件和配置文件，且所述模板文件的目录结构已按照模块划分好；

步骤2：定义交互式命令，包括提示用户输入项目名、提示用户输入项目描述、以及提示用户选择是否需要定制功能；

步骤3：找到存放模板文件的目录，将其中的主程序目录，包括文档、源代码、测试、配置和服务端复制到目标文件夹，根据用户的输入不同进行不同的处理逻辑，即若判断到没有选择定制化功能，则只复制基础的项目模板文件，包括文档、源代码和配置目录，反之不仅会复制基本的项目模板文件，还会复制带有定制化功能的模板文件到目标目录；

步骤4：根据最终选择生成新项目。

进一步的，定义交互式命令包括创建项目的命令，具体为：提示用户输入项目名称；名称输入完毕后，继续提示用户输入项目描述；描述输入完毕后，提示用户是否需要其他定制功能；若用户选择是，则生成带有定制功能的项目，若用户选择否，则只生成基础模块的项目。

进一步的，定义交互式命令包括创建项目单一模块的命令，具体为：提示用户输入模块的名称；名称输入完成后，继续提示用户该模块是否需要其他定制功能；若选择是，则生成带有定制功能的模块，若选择否，则只生成带有基础功能的模块。

与现有技术相比，本发明的有益效果是：通过模板文件生成新项目所需的文件内容，包括项目启动文件，配置文件等，并且在程序中定义好项目的模块和目录结构，让开发团队无需再花时间重新定义整理，快速搭建前端项目框架，提高效率，节省时间，配置灵活。

附图说明

图1是本发明一种前端项目框架生成方法之目录结构图。

图2是本发明一种前端项目框架生成方法之项目创建流程图。

图3是本发明一种前端项目框架生成方法之创建项目交互式命令流程图。

图4是本发明一种前端项目框架生成方法之创建模块交互式命令流程图。

具体实施方式

下面结合附图和具体实施方式对本发明作进一步详细的说明。本发明的前端表示网站的前台部分，包括网站的表现层和结构层，技术栈表示项目中使用到的各种技术，工具和框架的统称。

本发明一种前端项目框架生成方法，在创建项目的过程中，让开发团队自定义地选择新项目要包含哪些模块，一些不需要的项目模块可以不在新项目中创建，从而达到定制化创建新项目的目的。整合了现有前端的前沿技术，包括页面渲染技术，文件构建技术，页面数据状态管理技术等，这样使得创建出来的新项目可以很方便的为开发团队服务，提高团队的开发效率。而且整合的技术栈不是一成不变，而是通过技术发展随时进行更新，这样就不用担心技术栈得不到更新的问题。

详述如下：

1)项目模板文件

自动化创建项目的方法需要先定义一套项目模板文件，这些文件包括项目的启动文件，初始页面文件和样式文件，配置文件等，并且这些模板文件的目录结构已按照模块划分好了，方便开发团队快速熟悉项目框架。目录结构如图1所示。在图1中，src目录是项目源代码目录，下面有components，containers，constants，utils等目录，这些目录是按模块定义好的目录结构，webpack目录是存放配置文件的地方，另外还有其他一些项目文件。

2)项目创建程序

项目创建分2个部分，一个是项目整体框架的创建，一个是项目单个模块的创建。项目创建流程如图2所示，包括用户执行创建项目的命令、程序将模板文件复制到新项目的目录、提示用户选择是否需要定制化功能、根据用户选择生成新项目。

首先定义3个交互式命令，分别是提示用户输入项目名、提示用户输入项目描述以及提示用户选择是否需要定制功能。

然后是复制程序模板框架的功能，先找到存放模板文件的目录，然后将其中的主程序目录，包括文档、源代码、测试、配置和服务端复制到目标文件夹，其中根据用户的输入不同而有不同的处理逻辑。如果判断到用户没有选择了定制化功能，则程序只复制文档、源代码和配置目录的项目模板文件(基本的项目模板文件)，反之程序不仅会复制基本项目文件，还会复制带有定制化功能的模板文件到目标目录。

程序在执行复制文件的过程中，不是单纯的原封不动的拷贝文件，而是会在模板文件的基础上，动态生成具体的项目文件，然后再将文件拷贝到目标目录。比如，有一个项目模板文件叫package.json，里面的内容为："name":"<％＝projectName％>"，程序在执行的过程中，会将该文件动态生成为："name":"my app"，然后再将该文件复制到目标目录。

3)交互式命令

在用户创建项目的过程中，会提示用户做一些命名上的交互，包括输入项目名称，项目描述，选择特定的功能等。

(1)创建项目的交互式命令流程如图3所示：包括用户执行创建项目的命令、程序提示用户输入项目名称、名称输入完毕后程序继续提示用户输入项目描述、描述输入完毕后程序提示用户是否需要其他定制功能、如果用户输入“是”，则生成带有其他定制功能的项目、如果用户输入“否”，则只生成基础模块的项目，最后创建项目成功。

(2)创建项目模块的交互式流程如图4所示：包括用户执行创建项目单一模块的命令、程序提示用户输入模块的名称、名称输入完成后程序继续提示用户该模块是否需要其他定制功能、如果用户选择是，则程序生成带有定制功能的模块、如果用户选择否，则程序只生成带有基础功能的模块。

Claims (3)

1.一种前端项目框架生成方法，其特征在于，包括以下步骤：

步骤1：定义项目模板文件，包括项目的启动文件、初始页面文件、样式文件和配置文件，且所述模板文件的目录结构已按照模块划分好；

步骤2：定义交互式命令，包括提示用户输入项目名、提示用户输入项目描述、以及提示用户选择是否需要定制功能；

步骤3：找到存放模板文件的目录，将其中的主程序目录，包括文档、源代码、测试、配置和服务端复制到目标文件夹，根据用户的输入不同进行不同的处理逻辑，即若判断到没有选择定制化功能，则只复制基础的项目模板文件，包括文档、源代码和配置目录，反之不仅会复制基础的项目模板文件，还会复制带有定制化功能的模板文件到目标目录；

步骤4：根据最终选择生成新项目。

2.如权利要求1所述的一种前端项目框架生成方法，其特征在于，定义交互式命令包括创建项目的命令，具体为：提示用户输入项目名称；名称输入完毕后，继续提示用户输入项目描述；描述输入完毕后，提示用户是否需要其他定制功能；若用户选择是，则生成带有定制功能的项目，若用户选择否，则只生成基础模块的项目。

3.如权利要求1或2所述的一种前端项目框架生成方法，其特征在于，定义交互式命令包括创建项目单一模块的命令，具体为：提示用户输入模块的名称；名称输入完成后，继续提示用户该模块是否需要其他定制功能；若选择是，则生成带有定制功能的模块，若选择否，则只生成带有基础功能的模块。