基于VUE的前端应用组件开发方法与流程

本发明涉及前端应用开发领域，特别是基于vue的前端应用组件开发方法。

背景技术：

1、前端技术是指通过浏览器到用户端计算机的统称，包括前端设计和前端开发，前端设计为网站的视觉设计，前端开发则是网站的前台代码实现。针对新应用进行前端开发时，需要是利用市面上已有的开源的框架进行逐个页面的开发调试。

2、然而，在前端开发中，由于重复性工作较多，会出现组件之间相互影响的的问题，并且不同组件往往只能接入特定的框架，兼容性差，而针对上述的解决方式往往需要进行额外的开发，其成本较高。

技术实现思路

1、为了克服现有技术的上述缺点，本发明的目的是提供基于vue的前端应用组件开发方法，以有效解决上述问题中的一个或多个。

2、本发明解决其技术问题所采用的技术方案是：

3、基于vue的前端应用组件开发方法，其中，包括：

4、s1：构建组件库，创建组件库目录，配置将url代理到组件库中的路径；

5、s2：接收至少一个url的请求，根据所接收的url的请求进行整理制定页面布局并制作成需求模型；

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

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

8、作为本发明的进一步改进：在步骤s1之前，还包括步骤s01：预设兼容插件和编译构建插件，获取应用组件的配置对象，将得到的配置对象通过兼容插件进行规则转换，得到应用前端中所需的统一的组件样式信息和框架状态信息，通过编译构建插件将组件样式信息和框架状态信息进行分析整合，得到与应用前端相匹配的映射组件代码。

9、作为本发明的进一步改进：在步骤s01中，所述配置对象包括包括组件样式模板和组件状态模板。

10、作为本发明的进一步改进：通过组件样式模板进行自定义配置和/或预先配置得到的初始样式信息；通过兼容插件对样式信息进行样式规则名称和样式规则取值转换，得到与应用前端框架匹配的组件样式信息；通过组件样式模板与应用前端进行分析配置，得到与应用前端相匹配的框架状态信息，而后通过编译构建插件整合分析组件样式信息和框架状态信息，得到与应用前端相匹配的映射组件代码。

11、作为本发明的进一步改进：在步骤s1之后，步骤s2之前，预设一个组件库测验方法，其步骤如下：预设测试规则；通过vue框架将组件的信息进行实例化得到待测实例，将待测实例进行遍历，判断待测实例中的字段是否为空；若不为空，则获取字段对应的内容信息，字段为组件信息上对应的字段，内容信息为组件的名称；而后判断内容信息是否符合所述测试规则，若符合，则对所述组件进行测试；若为空，则直接判断该待测实例为不符合规则实例，将其对应的组件进行删除，并记录错误信息。

12、作为本发明的进一步改进：所述步骤s2具体为：提取所接收的url的参数，针对所提取的每个参数，确定每个参数对应的特征向量，根据每个参数对应的特征向量构建需求模型。

13、作为本发明的进一步改进：所述特征向量包括字符总数、字母总数、数字总数、特定符号总数、不同字符的数量、不同字母的数量、不同数字的数量、不同的特定符号的数量中的至少一个。

14、作为本发明的进一步改进：预设条件向量，在确定每个参数对应的特征向量时，判断特征向量是否满足条件向量；若是，则使用该特征向量对应的参数构建需求模型，若否，则将该特征向量所对应的参数视为异常，在构建需求模型时不考虑该参数

15、作为本发明的进一步改进：通过husky对组件库中的组件进行筛选。

16、作为本发明的进一步改进：所述组件库根据目录分为基础组件层、工具类组件层、业务类组件层和页面类组件层。

17、与现有技术相比，本发明的有益效果是：

18、本发明在实现前端开发的基础上，有效对组件进行独立化处理，避免组件之间互相影响，并能够有效增加组件的兼容性，适应不同需求的框架，进一步降低前端开发的成本。另外，通过对测验前进行优化，也能够提高组件的有效性，对构建需求模型进行优化，也能够避免出现异常。

技术特征：

1.基于vue的前端应用组件开发方法，其特征在于，包括：

2.根据权利要求1所述的基于vue的前端应用组件开发方法，其特征在于，在步骤s1之前，还包括步骤s01：预设兼容插件和编译构建插件，获取应用组件的配置对象，将得到的配置对象通过兼容插件进行规则转换，得到应用前端中所需的统一的组件样式信息和框架状态信息，通过编译构建插件将组件样式信息和框架状态信息进行分析整合，得到与应用前端相匹配的映射组件代码。

3.根据权利要求2所述的基于vue的前端应用组件开发方法，其特征在于，在步骤s01中，所述配置对象包括包括组件样式模板和组件状态模板。

4.根据权利要求3所述的基于vue的前端应用组件开发方法，其特征在于，通过组件样式模板进行自定义配置和/或预先配置得到的初始样式信息；通过兼容插件对样式信息进行样式规则名称和样式规则取值转换，得到与应用前端框架匹配的组件样式信息；通过组件样式模板与应用前端进行分析配置，得到与应用前端相匹配的框架状态信息，而后通过编译构建插件整合分析组件样式信息和框架状态信息，得到与应用前端相匹配的映射组件代码。

5.根据权利要求1所述的基于vue的前端应用组件开发方法，其特征在于，在步骤s1之后，步骤s2之前，预设一个组件库测验方法，其步骤如下：预设测试规则；通过vue框架将组件的信息进行实例化得到待测实例，将待测实例进行遍历，判断待测实例中的字段是否为空；若不为空，则获取字段对应的内容信息，字段为组件信息上对应的字段，内容信息为组件的名称；而后判断内容信息是否符合所述测试规则，若符合，则对所述组件进行测试；若为空，则直接判断该待测实例为不符合规则实例，将其对应的组件进行删除，并记录错误信息。

6.根据权利要求1所述的基于vue的前端应用组件开发方法，其特征在于，所述步骤s2具体为：提取所接收的url的参数，针对所提取的每个参数，确定每个参数对应的特征向量，根据每个参数对应的特征向量构建需求模型。

7.根据权利要求6所述的基于vue的前端应用组件开发方法，其特征在于，所述特征向量包括字符总数、字母总数、数字总数、特定符号总数、不同字符的数量、不同字母的数量、不同数字的数量、不同的特定符号的数量中的至少一个。

8.根据权利要求6所述的基于vue的前端应用组件开发方法，其特征在于，预设条件向量，在确定每个参数对应的特征向量时，判断特征向量是否满足条件向量；若是，则使用该特征向量对应的参数构建需求模型，若否，则将该特征向量所对应的参数视为异常，在构建需求模型时不考虑该参数。

9.根据权利要求1所述的基于vue的前端应用组件开发方法，其特征在于，通过husky对组件库中的组件进行筛选。

10.根据权利要求1所述的基于vue的前端应用组件开发方法，其特征在于，所述组件库根据目录分为基础组件层、工具类组件层、业务类组件层和页面类组件层。

技术总结
本发明提供基于VUE的前端应用组件开发方法，包括：S1：构建组件库，创建组件库目录，配置将URL代理到组件库中的路径；S2：接收至少一个URL的请求，根据所接收的URL的请求进行整理制定页面布局并制作成需求模型；S3：依据接收的URL的请求进行路由，在预先建立的组件库中选取相应的组件；S4：依据需求模型以及选取的组件进行组装以完成前端应用的开发。本发明在实现前端开发的基础上，有效对组件进行独立化处理，避免组件之间互相影响，并能够有效增加组件的兼容性，适应不同需求的框架，进一步降低前端开发的成本。另外，通过对测验前进行优化，也能够提高组件的有效性，对构建需求模型进行优化，也能够避免出现异常。

技术研发人员：徐欢,王伟东,王路权
受保护的技术使用者：北京全网数商科技股份有限公司
技术研发日：
技术公布日：2024/1/15