web前端项目搭建方法技术

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

【技术实现步骤摘要】
web前端项目搭建方法


[0001]本专利技术涉及计算机
，尤其涉及一种web前端项目搭建方法。

技术介绍

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

技术实现思路

[0003]本专利技术实施例提供一种web前端项目搭建方法，用以至少解决现有技术中web前端项目搭建效率低的问题。
[0004]根据本专利技术实施例的web前端项目搭建方法，包括：
[0005]基于Node.js安装Vue CLI，并基于所述Vue CLI，生成初始项目；
[0006]根据前端规范，在所述初始项目中创建统一规范化的通用文件，所述通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；
[0007]在所述初始项目中引入预编规范化组件库commonComponents，并编写公共业务场景可复用的模块及页面文件commonPages，以生成可复用通用模板项目；
[0008]基于所述Node.js创建脚手架工具项目，并基于所述可复用通用模板项目与所述脚手架工具项目，构建可复用脚手架；
[0009]基于所述可复用脚手架，搭建web前端项目。
[0010]根据本专利技术的一些实施例，所述生成可复用通用模板项目，包括：
[0011]构建代码规范文件；
[0012]基于所述代码规范文件、所述初始项目、所述通用文件、所述规范化组件库commonComponents以及所述模块及页面文件commonPages，生成可复用通用模板项目。
[0013]根据本专利技术的一些实施例，所述初始项目包括：公共文件public、业务代码文件src、单元测试文件tests、项目主vue文件App.vue、项目主入口文件mian.js、代码编写规范配置文件eslintrc.js、以及项目的描述、配置、及依赖信息文件package.json；
[0014]所述公共文件public包括项目主页文件html.index、系统图标文件favicon.ico；
[0015]所述业务代码文件src包括静态资源文件assets、公共组件components、路由文件router、状态文件store、以及web页面存放文件views。
[0016]根据本专利技术的一些实施例，所述根据前端规范，在所述初始项目中创建统一规范化的通用文件，包括：
[0017]在所述业务代码文件src下创建统一规范化的通用文件。
[0018]根据本专利技术的一些实施例，所述编写公共业务场景可复用的模块及页面文件commonPages，包括：
[0019]在所述web页面存放文件views中创建模块及页面文件commonPages。
[0020]根据本专利技术的一些实施例，所述构建代码规范文件，包括：
[0021]基于前端代码规范，在所述代码编写规范配置文件eslintrc.js中配置代码书写规范。
[0022]根据本专利技术的一些实施例，所述构建代码规范文件，包括：
[0023]在所述初始项目中新增.prettierrc.json配置文件，并配置代码格式化规范。
[0024]根据本专利技术的一些实施例，所述方法还包括：
[0025]基于开发工具vscode，对所述可复用通用模板项目进行代码语法校验和代码格式统一保存。
[0026]根据本专利技术的一些实施例，所述方法还包括：
[0027]在所述可复用通用模板项目中安装代码提交检查插件，并新增基于代码审查规则编写的统一代码提交规范检查文件。
[0028]根据本专利技术的一些实施例，所述方法还包括：
[0029]将所述可复用脚手架发布至npm服务器，以供下载安装。
[0030]本专利技术实施例提供了可复用的规范脚手架，用于产品/项目进行研发，可以避免在web前端项目重复工作，提升前端开效率，在很大程度上为开发人员提供了便利，具有广泛的应用市场。
[0031]上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。
附图说明
[0032]通过阅读下文实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。在附图中：
[0033]图1是本专利技术实施例中web前端项目搭建方法流程图；
[0034]图2是本专利技术实施例中通用模板项目运行效果图；
[0035]图3是本专利技术实施例中通用模板项目运行效果图。
具体实施方式
[0036]下面将参照附图更详细地描述本专利技术的示例性实施例。虽然附图中显示了本专利技术
的示例性实施例，然而应当理解，可以以各种形式实现本专利技术而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本专利技术，并且能够将本专利技术的范围完整的传达给本领域的技术人员。另外，在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
[0037]根据本专利技术实施例的web前端项目搭建方法，包括：
[0038]基于Node.js安装Vue CLI，并基于所述Vue CLI，生成初始项目；Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Vue CLI是一个基于Vue.js进行快速开发的完整系统。Vue.js是一套用于构建web界面的渐进式框架。
[0039]根据前端规范，在所述初始项目中创建统一规范化的通用文件，所述通用文件包括公共图标文件iocns、css样式文件styles、指令文件directive、过滤器filter、js工具类文件utils、通信服务文件service、混入文件mixins；
[0040]在所述初始项本文档来自技高网...

【技术保护点】

【技术特征摘要】
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、系统图标文件favico...

【专利技术属性】
技术研发人员：沈杰，叶圣强，冯锦辉，陈俊如，耿惠莉，
申请(专利权)人：中电云数智科技有限公司，
类型：发明
国别省市：