基于VUE的前端应用组件化开发方法及装置

技术领域

本发明涉及前端应用开发领域，具体涉及一种基于VUE的前端应用组件化开发方法及装置。

背景技术

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。

现有技术中，针对新应用进行前端开发时，需要是利用市面上已有的开源的框架，一个一个页面开发调试，既需要开发人员学习各种开源的前端技术，又需要开发人员学习各自领域的业务知识来完成前端应用的开发；而当需要开发大量页面时，所需要的开发周期也相对较长,开发成本也很高。

上述问题是目前亟待解决的。

发明内容

本发明所要解决的技术问题是提供一种基于VUE的前端应用组件化开发方法及装置。

本发明解决其技术问题所采用的技术方案是：提供了一种基于VUE的前端应用组件化开发方法，所述方法包括：

接收至少一个URL的请求；

依据接收的URL的请求进行整理制定页面布局并制作成需求模型；

依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；

依据需求模型以及选取的组件进行组装以完成前端应用的开发。

进一步的，所述组件库的建立方法包括：

分别开发基础组件库、工具类组件库、控件级业务组件库以及页面级组件库；

设定各个组件的依赖。

进一步的，所述基础组件库、工具类组件库、控件级业务组件库以及页面级组件库通过NPM或者Git Tag进行管理。

进一步的，所述各个组件的依赖的种类包括：

各级别组件之间的依赖；

组件内部间互相依赖；

各组件拥有自己依赖的第三方工具；

各组件中有公共的第三方依赖。

进一步的，所述基于VUE的前端应用组件化开发方法的还包括：

通过lerna来管理组件库中的依赖和/或版本变更；

通过husky对提交的组件包进行筛选。

进一步的，所述通过lerna来管理组件库中的依赖和/或版本变更的方法包括：

处理各组件之间的依赖关系；

管理组件的版本号和/或change log；

将处理后的组件发布到npm或Git Tag。

进一步的，所述基于VUE的前端应用组件化开发方法的还包括：

批量执行所述通过lerna来管理组件库中的依赖和/或版本变更的方法。

本发明还提供了一种基于VUE的前端应用组件化开发装置，所述装置包括：

接收模块，适于接收至少一个URL的请求；

模型建立模块，适于依据接收的URL的请求进行整理制定页面布局并制作成需求模型；

组件选取模块，适于依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；

组装模块，适于依据需求模型以及选取的组件进行组装以完成前端应用的开发。

本发明还提供了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被计算机运行时执行如上述方法中的步骤。

本发明还提供了一种电子设备，包括存储器和处理器；所述存储器中存储有至少一条程序指令；所述处理器，通过加载并执行所述至少一条程序指令以实现如上述方法中的步骤。

本发明的有益效果是：本发明提供了一种基于VUE的前端应用组件化开发方法及装置，其中基于VUE的前端应用组件化开发方法通过依据接收的URL的请求进行整理制定页面布局并制作成需求模型；依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；依据需求模型以及选取的组件进行组装以完成前端应用的开发。将前端应用拆分为多个组件的组合，并调取预先建立的组件库中多个组件进行组装，从而完成对前端应用的开发，极大的减少了开发周期以及降低了开发成本。

附图说明

下面结合附图和实施例对本发明作进一步说明。

图1是本发明实施例提供的基于VUE的前端应用组件化开发方法的流程图。

图2是本发明实施例提供的基于VUE的前端应用组件化开发装置的原理框图。

图3是本发明实施例所提供的电子设备的部分原理框图。

具体实施方式

现在结合附图对本发明作详细的说明。此图为简化的示意图，仅以示意方式说明本发明的基本结构，因此其仅显示与本发明有关的构成。

实施例1

请参阅图1，本实施例提供了一种基于VUE的前端应用组件化开发方法，将前端应用拆分为多个组件的组合，并调取预先建立的组件库中多个组件进行组装，从而完成对前端应用的开发，极大的减少了开发周期以及降低了开发成本。

具体来说，所述方法包括：

S110：接收至少一个URL的请求。

在本实施例中，通过微前端接收页面地址(URL)的请求。微前端是一种类似于微服务的架构，将微服务的历练应用于浏览器端。

S120：依据接收的URL的请求进行整理制定页面布局并制作成需求模型。

在本实施例中，通过接收的URL的请求进行整理并定制界面布局，同时践行逻辑规划，设计对接接口，从而制作成需求模型。

S130：依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件。

在本实施例中，所述组件库的建立方法包括：

S131：分别开发基础组件库、工具类组件库、控件级业务组件库以及页面级组件库。

具体来说，所述基础组件库、工具类组件库、控件级业务组件库以及页面级组件库通过NPM或者Git Tag进行管理。

S132：设定各个组件的依赖。

其中，所述各个组件的依赖的种类包括：

各级别组件之间的依赖；

组件内部间互相依赖；

各组件拥有自己依赖的第三方工具；

各组件中有公共的第三方依赖。

S140：依据需求模型以及选取的组件进行组装以完成前端应用的开发。

具体来说，前端应用完成初步组装后，需要发布到私有仓库，具体步骤如下：检查哪些项目应该被publish；调整lerna.json中的版本号；修改所有的package.json让它们指向正确的版本；更新所有的依赖；创建新的git commit和tag；publish(可以配置--skip-npm跳过发布到npm)；把tag和相应的commit给push上去。

在本实施例中，所述基于VUE的前端应用组件化开发方法的还包括：

S150：通过lerna来管理组件库中的依赖和/或版本变更。

具体来说，所述通过lerna来管理组件库中的依赖和/或版本变更的方法包括：

S151：处理各组件之间的依赖关系；

S152：管理组件的版本号和/或change log；

S153：将处理后的组件发布到npm或Git Tag。

通过lerna对依赖进行管理，实现了自动维护包与包之间的依赖关系，每次修改时自动对版本号的管理。

在本实施例中，步骤S150可以批量执行，即，批量执行所述通过lerna来管理组件库中的依赖和/或版本变更的方法。

S160：通过husky对提交的组件包进行筛选。

在本实施例中，通过步骤S160对提交的组件包进行规范，筛选出合格的组件包放入组件库种，不必担心开发者不按lint的规则来编写代码或者随意编写提交信息。

实施例2

请参阅图2，本实施例还提供了一种基于VUE的前端应用组件化开发装置，所述装置包括：接收模块、模型建立模块、组件选取模块以及组装模块。

在本实施例中，接收模块，适于接收至少一个URL的请求；在本实施例中，通过微前端接收页面地址(URL)的请求。微前端是一种类似于微服务的架构，将微服务的历练应用于浏览器端。

在本实施例中，模型建立模块，适于依据接收的URL的请求进行整理制定页面布局并制作成需求模型，具体来说，通过接收的URL的请求进行整理并定制界面布局，同时践行逻辑规划，设计对接接口，从而制作成需求模型。

在本实施例中，组件选取模块，适于依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件。

其中，所述组件库的建立方法包括：

S131：分别开发基础组件库、工具类组件库、控件级业务组件库以及页面级组件库。

具体来说，所述基础组件库、工具类组件库、控件级业务组件库以及页面级组件库通过NPM或者Git Tag进行管理。

S132：设定各个组件的依赖。

其中，所述各个组件的依赖的种类包括：

各级别组件之间的依赖；

组件内部间互相依赖；

各组件拥有自己依赖的第三方工具；

各组件中有公共的第三方依赖。

在本实施例中，组装模块，适于依据需求模型以及选取的组件进行组装以完成前端应用的开发。具体来说，前端应用完成初步组装后，需要发布到私有仓库，具体步骤如下：检查哪些项目应该被publish；调整lerna.json中的版本号；修改所有的package.json让它们指向正确的版本；更新所有的依赖；创建新的git commit和tag；publish(可以配置--skip-npm跳过发布到npm)；把tag和相应的commit给push上去。

在本实施例中，所述基于VUE的前端应用组件化开发装置的还包括：

lerna管理模块,适于通过lerna来管理组件库中的依赖和/或版本变更。

具体来说，所述通过lerna来管理组件库中的依赖和/或版本变更的方法包括：

S151：处理各组件之间的依赖关系；

S152：管理组件的版本号和/或change log；

S153：将处理后的组件发布到npm或Git Tag。

通过lerna对依赖进行管理，实现了自动维护包与包之间的依赖关系，每次修改时自动对版本号的管理。

在本实施例中，lerna管理模块可以批量执行，即，lerna管理模块批量执行所述通过lerna来管理组件库中的依赖和/或版本变更的方法。

在本实施例中，所述基于VUE的前端应用组件化开发装置的还包括：

筛选模块，适于通过husky对提交的组件包进行筛选。具体来说，通过步骤S160对提交的组件包进行规范，筛选出合格的组件包放入组件库种，不必担心开发者不按lint的规则来编写代码或者随意编写提交信息。

实施例3

本实施例提供了一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被计算机运行时执行实施例1所提供的基于VUE的前端应用组件化开发方法。

基于VUE的前端应用组件化开发方法通过依据接收的URL的请求进行整理制定页面布局并制作成需求模型；依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；依据需求模型以及选取的组件进行组装以完成前端应用的开发。将前端应用拆分为多个组件的组合，并调取预先建立的组件库中多个组件进行组装，从而完成对前端应用的开发，极大的减少了开发周期以及降低了开发成本。

实施例4

请参阅图3，本发明实施例还提供了一种电子设备，包括：存储器502和处理器501；所述存储器502中存储有至少一条程序指令；所述处理器501，通过加载并执行所述至少一条程序指令以实现如实施例1所提供的基于VUE的前端应用组件化开发方法。

存储器502和处理器501采用总线方式连接，总线可以包括任意数量的互联的总线和桥，总线将一个或多个处理器501和存储器502的各种电路连接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路连接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口在总线和收发机之间提供接口。收发机可以是一个元件，也可以是多个元件，比如多个接收器和发送器，提供用于在传输介质上与各种其他装置通信的单元。经处理器501处理的数据通过天线在无线介质上进行传输，进一步，天线还接收数据并将数据传送给处理器501。

处理器501负责管理总线和通常的处理，还可以提供各种功能，包括定时，外围接口，电压调节、电源管理以及其他控制功能。而存储器502可以被用于存储处理器501在执行操作时所使用的数据。

综上所述，本发明提供了一种基于VUE的前端应用组件化开发方法及装置，其中基于VUE的前端应用组件化开发方法通过依据接收的URL的请求进行整理制定页面布局并制作成需求模型；依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；依据需求模型以及选取的组件进行组装以完成前端应用的开发。将前端应用拆分为多个组件的组合，并调取预先建立的组件库中多个组件进行组装，从而完成对前端应用的开发，极大的减少了开发周期以及降低了开发成本。

以上述依据本发明的理想实施例为启示，通过上述的说明内容，相关的工作人员完全可以在不偏离本发明的范围内，进行多样的变更以及修改。本项发明的技术范围并不局限于说明书上的内容，必须要根据权利要求范围来确定其技术性范围。