CN115454417A - web前端项目搭建方法 - Google Patents

Abstract

本发明公开了一种web前端项目搭建方法。web前端项目搭建方法包括：基于Node.js安装VueCLI，并基于VueCLI，生成初始项目；根据前端规范，在初始项目中创建统一规范化的通用文件，通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；在初始项目中引入预编规范化组件库commonComponents，并编写公共业务场景可复用的模块及页面文件commonPages，以生成可复用通用模板项目；基于Node.js创建脚手架工具项目，并基于可复用通用模板项目与脚手架工具项目，构建可复用脚手架；基于可复用脚手架，搭建web前端项目。本发明可以提升web前端项目的开发效率，减少开发人员的重复无效工作，为开发人员提供了便利，具有广泛的应用市场。

Description

web前端项目搭建方法

技术领域

本发明涉及计算机技术领域，尤其涉及一种web前端项目搭建方法。

背景技术

目前web前端项目搭建使用官方Vue脚手架Vue CLI进行初始项目创建，初始项目创建完成后；在初始项目上手动创建基于产品/项目的实际业务所需的文件夹、工具类、页面、样式。在每次需要web项目搭建的时候进行一次重复的手动创建操作。由于每个研发人员都有自己的编码习惯，不同研发人员在初始化项目中创建的文件夹、工具类、页面、样式；会附带自己个性化的命名。造成了每次初始化web项目创建的过程中内部结构、文件夹、工具类、页面、样式等命名都不一样；web项目创建完成后，由于研发过程中没有进行代码编写的约束，每位研发人员在代码研发过程中存在个性化代码编写；开发工具代码格式化配置个性化。在代码提交到版本管理工具的过程中，没有对提交代码内容的描述信息进行规范管理。这种方式存在以下缺陷：手动重复项目搭建、无统一规范项目模板可复用；代码编写个性化无约束、代码风格不统一、不规范；代码格式化配置各异，代码格式不统一、不规范；代码提交上库信息的格式不统一、不规范。

发明内容

本发明实施例提供一种web前端项目搭建方法，用以至少解决现有技术中web前端项目搭建效率低的问题。

根据本发明实施例的web前端项目搭建方法，包括：

基于Node.js安装Vue CLI，并基于所述Vue CLI，生成初始项目；

根据前端规范，在所述初始项目中创建统一规范化的通用文件，所述通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；

在所述初始项目中引入预编规范化组件库commonComponents，并编写公共业务场景可复用的模块及页面文件commonPages，以生成可复用通用模板项目；

基于所述Node.js创建脚手架工具项目，并基于所述可复用通用模板项目与所述脚手架工具项目，构建可复用脚手架；

基于所述可复用脚手架，搭建web前端项目。

根据本发明的一些实施例，所述生成可复用通用模板项目，包括：

构建代码规范文件；

基于所述代码规范文件、所述初始项目、所述通用文件、所述规范化组件库commonComponents以及所述模块及页面文件commonPages，生成可复用通用模板项目。

根据本发明的一些实施例，所述初始项目包括：公共文件public、业务代码文件src、单元测试文件tests、项目主vue文件App.vue、项目主入口文件mian.js、代码编写规范配置文件eslintrc.js、以及项目的描述、配置、及依赖信息文件package.json；

所述公共文件public包括项目主页文件html.index、系统图标文件favicon.ico；

所述业务代码文件src包括静态资源文件assets、公共组件components、路由文件router、状态文件store、以及web页面存放文件views。

根据本发明的一些实施例，所述根据前端规范，在所述初始项目中创建统一规范化的通用文件，包括：

在所述业务代码文件src下创建统一规范化的通用文件。

根据本发明的一些实施例，所述编写公共业务场景可复用的模块及页面文件commonPages，包括：

在所述web页面存放文件views中创建模块及页面文件commonPages。

根据本发明的一些实施例，所述构建代码规范文件，包括：

基于前端代码规范，在所述代码编写规范配置文件eslintrc.js中配置代码书写规范。

根据本发明的一些实施例，所述构建代码规范文件，包括：

在所述初始项目中新增.prettierrc.json配置文件，并配置代码格式化规范。

根据本发明的一些实施例，所述方法还包括：

基于开发工具vscode，对所述可复用通用模板项目进行代码语法校验和代码格式统一保存。

根据本发明的一些实施例，所述方法还包括：

在所述可复用通用模板项目中安装代码提交检查插件，并新增基于代码审查规则编写的统一代码提交规范检查文件。

根据本发明的一些实施例，所述方法还包括：

将所述可复用脚手架发布至npm服务器，以供下载安装。

本发明实施例提供了可复用的规范脚手架，用于产品/项目进行研发，可以避免在web前端项目重复工作，提升前端开效率，在很大程度上为开发人员提供了便利，具有广泛的应用市场。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。在附图中：

图1是本发明实施例中web前端项目搭建方法流程图；

图2是本发明实施例中通用模板项目运行效果图；

图3是本发明实施例中通用模板项目运行效果图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。另外，在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

根据本发明实施例的web前端项目搭建方法，包括：

基于Node.js安装Vue CLI，并基于所述Vue CLI，生成初始项目；Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Vue CLI是一个基于Vue.js进行快速开发的完整系统。Vue.js是一套用于构建web界面的渐进式框架。

根据前端规范，在所述初始项目中创建统一规范化的通用文件，所述通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；

在所述初始项目中引入预编规范化组件库commonComponents，并编写公共业务场景可复用的模块及页面文件commonPages，以生成可复用通用模板项目；

基于所述Node.js创建脚手架工具项目，并基于所述可复用通用模板项目与所述脚手架工具项目，构建可复用脚手架；

基于所述可复用脚手架，搭建web前端项目。

采用本发明实施例，开发人员只要构建好可复用脚手架，后续就都可以应用该可复用脚手架进行web前端项目的多次开发，所谓是一次构建多次受用，极大了提升了web前端项目的开发效率，减少开发人员的重复无效工作，为开发人员提供了便利，具有广泛的应用市场。同时也规范了开发人员的开发流程以及文件。

在上述实施例的基础上，进一步提出各变型实施例，在此需要说明的是，为了使描述简要，在各变型实施例中仅描述与上述实施例的不同之处。

根据本发明的一些实施例，所述生成可复用通用模板项目，包括：

构建代码规范文件；代码规范文件用于规范开发人员的代码撰写以及命名。

基于所述代码规范文件、所述初始项目、所述通用文件、所述规范化组件库commonComponents以及所述模块及页面文件commonPages，生成可复用通用模板项目。

根据本发明的一些实施例，所述初始项目包括：公共文件public、业务代码文件src、单元测试文件tests、项目主vue文件App.vue、项目主入口文件mian.js、代码编写规范配置文件eslintrc.js、以及项目的描述、配置、及依赖信息文件package.json；

所述公共文件public包括项目主页文件html.index、系统图标文件favicon.ico；

所述业务代码文件src包括静态资源文件assets、公共组件components、路由文件router、状态文件store、以及web页面存放文件views。

根据本发明的一些实施例，所述根据前端规范，在所述初始项目中创建统一规范化的通用文件，包括：

在所述业务代码文件src下创建统一规范化的通用文件。

根据本发明的一些实施例，所述编写公共业务场景可复用的模块及页面文件commonPages，包括：

在所述web页面存放文件views中创建模块及页面文件commonPages。

根据本发明的一些实施例，所述构建代码规范文件，包括：

基于前端代码规范，在所述代码编写规范配置文件eslintrc.js中配置代码书写规范。由此，可以规范、统一开发人员的代码书写。

根据本发明的一些实施例，所述构建代码规范文件，包括：

在所述初始项目中新增.prettierrc.json配置文件，并配置代码格式化规范。由此，可以规范、统一开发人员的代码格式。

根据本发明的一些实施例，所述方法还包括：

基于开发工具vscode，对所述可复用通用模板项目进行代码语法校验和代码格式统一保存。由此，可以规范、统一开发人员的保存方式，并对代码进行语法校验。

根据本发明的一些实施例，所述方法还包括：

在所述可复用通用模板项目中安装代码提交检查插件，并新增基于代码审查规则编写的统一代码提交规范检查文件。由此，可以规范、统一提交流程。

根据本发明的一些实施例，所述方法还包括：

将所述可复用脚手架发布至npm服务器，以供下载安装。

由此，可复用脚手架可以惠及到其他开发人员，其他开发人员只要从npm服务器下载安装其所需的可复用脚手架即可利用其进行web前端项目搭建。

下面参照图1-图3以一个具体的实施例详细描述根据本发明实施例的web前端项目搭建方法。值得理解的是，下述描述仅是示例性说明，而不是对本发明的具体限制。凡是采用本发明的相似结构及其相似变化，均应列入本发明的保护范围。

目前web前端项目搭建使用官方Vue脚手架Vue CLI进行初始项目创建，初始项目创建完成后；在初始项目上手动创建基于产品/项目的实际业务所需的文件夹、工具类、页面、样式。在每次需要web项目搭建的时候进行一次重复的手动创建操作。由于每个研发人员都有自己的编码习惯，不同研发人员在初始化项目中创建的文件夹、工具类、页面、样式；会附带自己个性化的命名。造成了每次初始化web项目创建的过程中内部结构、文件夹、工具类、页面、样式等命名都不一样、命名不规范、不统一；同时在web项目创建完成后，由于研发过程中没有进行代码编写的约束，每位研发人员在代码研发过程中存在个性化代码编写、导致代码风格不统一、不规范。由于开发工具的格式化配置未统一，在代码研发的过程中代码保存格式化后、代码格式不统一、不规范。在代码提交到版本管理工具的过程中，没有对提交代码内容的描述信息进行规范管理；导致每位研发人员、每次提交代码的时候提交的描叙信息格式不统一、不规范。存在以下缺陷：手动重复项目搭建、无统一规范项目模板可复用；代码编写个性化无约束、代码风格不统一、不规范；代码格式化配置各异，代码格式不统一、不规范；代码提交上库信息的格式不统一、不规范。

基于此，本发明实施例提出一种web前端项目搭建方法。

首先，为方便读者更好理解本发明，现对本发明所涉及到的专业术语进行相应解释说明：

Node.js，一个基于Chrome V8引擎的JavaScript运行环境。

Vue.js，一套用于构建web界面的渐进式框架。

Vue CLI命令行工具，一个基于Vue.js进行快速开发的完整系统。

npm的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

Vscode，一款软件开发工具，settings.json是vscode开发工具的配置文件。

Eslint，一款插件化的javascript代码检测工具。

.eslintrc.js，插件化的javascript代码检测工具配置文件。

Prettier，一款代码格式的格式化插件。

.prettierrc.json，代码格式化的插件的属性配置文件。

husky、@commitlint/cli、@commitlint/config-conventional代码上库提交信息检查插件。

package.json，项目的描述、配置、及依赖信息。

https://www.npmjs.com/，Node Package Manage网站。

参照图1所示，本发明实施例的web前端项目搭建方法，包括：

步骤一：基于Node.js安装Vue CLI，使用Vue CLI初始化项目。详细步骤如下：

下载并安装Node.js到windows系统，在Windows命令行使用Node PackageManager命令：npm install-g@vue/cli，安装官方脚手架Vue CLI；

在Windows命令行使用已安装的Vue CLI命令：vue create project-template，创建名称为project-template的初始项目；

初始项目包括：

public文件夹，包含html.index文件(项目主页)、favicon.ico文件(系统图标)；

src(业务代码文件夹)、src文件夹内包含assets(静态资源)文件夹、components(公共组件)文件夹、

router(路由)文件夹、store(状态)文件夹、views(web页面存放)文件夹；

tests(单元测试)文件夹；

App.vue(项目主vue文件，挂在到web主页进行页面显示)；

mian.js(项目主入口文件).eslintrc.js(代码编写规范配置文件)；

package.json(项目的描述、配置、及依赖信息)，例如：eslint、prettier等插件依赖信息。

步骤二：在初始项目中进行规范化配置，构建可复用通用模板项目。详细步骤如下：

在初始项目的src文件夹下，新增统一通用文件夹，包括iocns(公共图标文件)、styles(css样式)、directive(指令)、filter(过滤器)、utils(js工具类)、service(通信服务)、mixins(混入)等通用文件；

在初始项目中引入已编写好的规范化组件库commonComponents；

在初始项目的src文件夹下的views文件夹中，进行commonPages通用模板、页面的创建与编写；

基于前端代码规范，在初始项目的配置文件.eslintrc.js中进行各项规范化配置，控制代码书写规范；

在初始项目中新增配置.prettierrc.json配置文件，编写代码格式化配置；

在开发工具vscode的配置文件settings.json中配置配置项，在代码保存的同时使用项目自带的eslint插件进行代码语法校验；prettier插件进行代码格式统一格式化保存；

在项目根目录打开windows命令行执行npm install命令安装husky、@commitlint/cli、@commitlint/config-conventional代码提交检查插件，在项目根目录新增基于代码审查规则编写的统一代码提交规范检查文件；在代码上库提交的过程中通过插件commitlint进行代码上库信息提交检查；

整个通用模板项目搭建完成的运行效果如图2-图3所示。

步骤三：基于Node.js创建脚手架工具项目，将步骤二搭建好的通用模板项目放置到脚手架工具项目内，编写前端自动化构建脚手架。详细步骤如下：

创建文件夹auto-create-cli，在auto-create-cli文件内打开Windows命令行，并使用Node Package Manager命令npm init，生成package.json文件；

将project-template项目模板迁移到auto-create-cli构建工具项目的根目录；

使用Node Package Manager命令安装命令行库commander、命令行交互库inquirer、项目名称校验库validate-npm-package-name、执行过程中信息输出库chalk、执行阶段状态库ora、文件夹操作库fs-extra、系统命令行操作库shelljs；

编写项目自动化创建的node命令行工具，auto create项目创建方法、项目描述信息项交互方法、重复项目名称校验方法、模板项目创建方法、重复项目覆盖、删除方法、自动安装依赖包方法、完成脚手架编写。

步骤四：将编写的脚手架发布到npm服务器。

使用已注册的npm账号登录npm服务器将编写的脚手架发布到npm服务器https://www.npmjs.com/。

步骤五：从npm服务器下载并安装脚手架。脚手架安装完成，执行项目创建命令进行项目模板初始化；在项目模板初始化后自动安装前端依赖包。

打开Windows命令行，从npm服务器https://www.npmjs.com/通过npm installauto-create-cli-g命令进行全局安装；

脚手架安装完成后可在Windows系统任何位置通过Windows命令行执行autocreate【项目名称】命令自动化进行模板项目快速创建、创建过程可以进行项目相关描述信息输入，通过项目创建方法把模板项目创建到本地；例如同一目录已经存在的重复创建的项目模板名称可选择覆盖或者删除同名项目目录、项目创建完成后调用自动安装前端依赖包方法进行package.json依赖配置安装；安装完成后运行项目启动命令npm run serve即可在浏览器查看搭建的前端项目。

后期所有项目搭建均使用该自动化脚手架搭建。

本发明实施例具有如下有益效果：

提供规范化的前端项目模板用于产品/项目进行研发，避免重复工作提升前端开效率；

统一代码编码规范检查，保持代码书写一致性；

统一格式化代码，保持代码格式一致；

统一代码提交规范；

提供命令行自动化模板项目创建。

需要说明的是，以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种web前端项目搭建方法，其特征在于，包括：

基于Node.js安装Vue CLI，并基于所述Vue CLI，生成初始项目；

根据前端规范，在所述初始项目中创建统一规范化的通用文件，所述通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；

在所述初始项目中引入预编规范化组件库commonComponents，并编写公共业务场景可复用的模块及页面文件commonPages，以生成可复用通用模板项目；

基于所述Node.js创建脚手架工具项目，并基于所述可复用通用模板项目与所述脚手架工具项目，构建可复用脚手架；

基于所述可复用脚手架，搭建web前端项目。

2.如权利要求1所述的方法，其特征在于，所述生成可复用通用模板项目，包括：

构建代码规范文件；

基于所述代码规范文件、所述初始项目、所述通用文件、所述规范化组件库commonComponents以及所述模块及页面文件commonPages，生成可复用通用模板项目。

3.如权利要求2所述的方法，其特征在于，所述初始项目包括：公共文件public、业务代码文件src、单元测试文件tests、项目主vue文件App.vue、项目主入口文件mian.js、代码编写规范配置文件eslintrc.js、以及项目的描述、配置、及依赖信息文件package.json；

所述公共文件public包括项目主页文件html.index、系统图标文件favicon.ico；

所述业务代码文件src包括静态资源文件assets、公共组件components、路由文件router、状态文件store、以及web页面存放文件views。

4.如权利要求3所述的方法，其特征在于，所述根据前端规范，在所述初始项目中创建统一规范化的通用文件，包括：

在所述业务代码文件src下创建统一规范化的通用文件。

5.如权利要求3所述的方法，其特征在于，所述编写公共业务场景可复用的模块及页面文件commonPages，包括：

在所述web页面存放文件views中创建模块及页面文件commonPages。

6.如权利要求3所述的方法，其特征在于，所述构建代码规范文件，包括：

基于前端代码规范，在所述代码编写规范配置文件eslintrc.js中配置代码书写规范。

7.如权利要求3所述的方法，其特征在于，所述构建代码规范文件，包括：

在所述初始项目中新增.prettierrc.json配置文件，并配置代码格式化规范。

8.如权利要求1-7中任一项所述的方法，其特征在于，所述方法还包括：

基于开发工具vscode，对所述可复用通用模板项目进行代码语法校验和代码格式统一保存。

9.如权利要求1-7中任一项所述的方法，其特征在于，所述方法还包括：

在所述可复用通用模板项目中安装代码提交检查插件，并新增基于代码审查规则编写的统一代码提交规范检查文件。

10.如权利要求1所述的方法，其特征在于，所述方法还包括：

将所述可复用脚手架发布至npm服务器，以供下载安装。

Images