一种提升效率前端开发方法与流程

1.本发明涉及前端开发领域，尤其涉及一种提升效率前端开发方法。


背景技术：

2.前端开发过程中，前端工程师经常会在同一个项目的不同文件中写一些相同的代码，在不同的项目中做相同的配置，这些重复性的劳动无疑降低了我们的开发效率，因此我们可以通过优化流程及生成通用模板等方式提升前端开发效率。
3.现有的技术方案时使用前端脚手架(例如
4.vue-cli,react-cli,webpack,vite)来自动构建项目，通过npminstall的方式安装一些依赖包提供复杂的功能。
5.目前的脚手架只提供了构建项目，完成基础配置，安装并引入需要的依赖的功能，存在以下问题：
6.页面开发过程中经常封装并引入组件，组件封装有部分相同的代码需要重复书写。
7.接口请求需要按照axios请求规范请求接口，也产生很多的重复代码。
8.页面开发过程中经常封装并引入组件，组件封装有部分相同的代码需要重复书写，因此提出一下解决方案：(1)当我们引入一个还没有创建的组件时，自动创建组件，并使用符合一定规范发组件模板填充组件文件。(2)组件的组件名与文件名一致，组件的最外层容器的类名由组件名确定，组件的样式隔离，组件的数据隔离都在组件模板中实现。(3)当我们使用一个外部方法或者外部组件时，组件被自动引入。
9.接口请求需要按照axios请求规范请求接口，也产生很多的重复代码，因此提出一下解决方案：(1)统一管理接口请求，普通的接口只关注请求路径，请求方式，请求参数，在接口仓库中只体现这三者，通过三者自动生成符合规则的请求。


技术实现要素：

10.鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种提升效率前端开发方法。
11.根据本发明的一个方面，提供了一种提升效率前端开发方法，所述开发方法包括：新建文件夹自动生成组件；统一管理接口。
12.可选的，所述新建文件夹自动生成组件具体包括：
13.使用nodejs书写脚本，执行脚本npmruncommycom自动生成mycom组件；
14.脚本创建mycom文件夹；
15.脚本创建mycom/index.vue文件；
16.在template文件夹下创建模板文件，拥有唯一类名，组件name属性，常用钩子函数，样式隔离；
17.脚本将模板文件的内容写入mycom/index.vue文件；
18.在使用组件的时候自动引入并注册组件。
19.可选的，所述统一管理接口具体包括：
20.对axios进行二次封装；
21.基于axios封装一个公共的请求方法；
22.创建一个api对象，以键值的方式存储所有接口；
23.遍历api对象，使用公共的请求方法将每一个键值对的值转化为一个axios请求；
24.在需要的地方发起请求，使用api.login(data)，进行语法提示。
25.可选的，所述接口包括：api:{login:[
‘
api/login’,get]}。
[0026]
本发明提供的一种提升效率前端开发方法，所述开发方法包括：新建文件夹自动生成组件；统一管理接口。提升了前端开发的效率。
[0027]
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
[0028]
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
[0029]
图1为本发明实施例提供的新建文件夹自动生成组件实现流程图；
[0030]
图2为本发明实施例提供的统一管理接口的流程图。
具体实施方式
[0031]
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0032]
本发明的说明书实施例和权利要求书及附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。
[0033]
下面结合附图和实施例，对本发明的技术方案做进一步的详细描述。
[0034]
页面开发过程中经常封装并引入组件，组件封装有部分相同的代码需要重复书写，因此提出一下解决方案：(1)当我们引入一个还没有创建的组件时，自动创建组件，并使用符合一定规范发组件模板填充组件文件。(2)组件的组件名与文件名一致，组件的最外层容器的类名由组件名确定，组件的样式隔离，组件的数据隔离都在组件模板中实现。(3)当我们使用一个外部方法或者外部组件时，组件被自动引入。
[0035]
接口请求需要按照axios请求规范请求接口，也产生很多的重复代码,因此提出一下解决方案：(1)统一管理接口请求，普通的接口只关注请求路径，请求方式，请求参数，在接口仓库中只体现这三者，通过三者自动生成符合规则的请求.
[0036]
如图1所示，新建文件夹自动生成组件实现流程：
[0037]
1.使用nodejs书写脚本，执行脚本npmruncommycom自动生成mycom组件
[0038]
2.脚本创建mycom文件夹
[0039]
3.脚本创建mycom/index.vue文件
[0040]
4.在template文件夹下创建模板文件，拥有唯一类名，组件name属性，常用钩子函数，样式隔离
[0041]
5.脚本将模板文件的内容写入mycom/index.vue文件
[0042]
6.在使用组件的时候自动引入并注册组件。
[0043]
如图2所示，统一管理接口方案：
[0044]
1.对axios进行二次封装
[0045]
2.基于axios封装一个公共的请求方法
[0046]
3.创建一个api对象，以键值的方式存储所有接口api:{login:[
‘
api/login’,get]}
[0047]
4.遍历api对象，使用公共的请求方法将每一个键值对的值转化为一个axios请求
[0048]
5.在需要的地方发起请求，使用api.login(data)，会有语法提示。
[0049]
有益效果：创建模板文件，拥有唯一类名，组件name属性，常用钩子函数，样式隔离
[0050]
创建一个api对象，以键值的方式存储所有接口
[0051]
api:{login:[
‘
api/login’,data]}。
[0052]
以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种提升效率前端开发方法，其特征在于，所述开发方法包括：新建文件夹自动生成组件；统一管理接口。2.根据权利要求1所述的一种提升效率前端开发方法，其特征在于，所述新建文件夹自动生成组件具体包括：使用nodejs书写脚本，执行脚本npmruncommycom自动生成mycom组件；脚本创建mycom文件夹；脚本创建mycom/index.vue文件；在template文件夹下创建模板文件，拥有唯一类名，组件name属性，常用钩子函数，样式隔离；脚本将模板文件的内容写入mycom/index.vue文件；在使用组件的时候自动引入并注册组件。3.根据权利要求1所述的一种提升效率前端开发方法，其特征在于，所述统一管理接口具体包括：对axios进行二次封装；基于axios封装一个公共的请求方法；创建一个api对象，以键值的方式存储所有接口；遍历api对象，使用公共的请求方法将每一个键值对的值转化为一个axios请求；在需要的地方发起请求，使用api.login(data)，进行语法提示。4.根据权利要求1所述的一种提升效率前端开发方法，其特征在于，所述接口包括：api:{login:[
‘
api/login’,get]}。

技术总结
本发明提供的一种提升效率前端开发方法，所述开发方法包括：新建文件夹自动生成组件；统一管理接口。创建模板文件，拥有唯一类名，组件name属性，常用钩子函数，样式隔离创建一个api对象，以键值的方式存储所有接口api:{login:[


技术研发人员：郭燕超
受保护的技术使用者：北银金融科技有限责任公司
技术研发日：2023.07.11
技术公布日：2023/10/15