(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 201811591773.6
(22)申请日 2018.12.20
(71)申请人 广东建采网科技有限公司
地址 519000 广东省珠海市高新区唐家湾
镇软件园路1号生成加工中心5#四层
1-4单元
(72)发明人 唐陵衡　杨宇　李贤　
(74)专利代理机构 广州汇航专利代理事务所
(普通合伙) 44537
代理人 张静
(51)Int.Cl.
G06F  8/34(2018.01)
G06F  16/958(2019.01)
(54)发明名称
基于Vue架构的WEB前端通用UI组件库
(57)摘要
本发明公开了基于Vue架构的WEB前端通用
UI组件库，包括：组件配置模块，提供接口服务，
用于负责实例化相应的组件；通用组件，用于直
接与用户交互；其中通用组件包括：基础布局组
件、窗体组件、数据组件、消息组件和导航组件；
所述通用组件中每个组件的配置信息从后台配
置文件读取，组件配置模块为各组件与前端WEB
网站提供统一的接口服务，根据组件的配置信息
实现各组件之间与前端WEB网站的接口连接。本
发明通过对各类组件可配置性的研究，以配置文
件的形式对组件的属性、样式进行配置，可以随
时删除、插入和修改，大大增强了WEB网站的易维
护性，前端组件的可移植性强，提高网站开发人
员的工作效率。权利要求书1页  说明书5页  附图1页CN 109814858 A 2019.05.28
C N  109814858
A
1.基于Vue架构的WEB前端通用UI组件库，其特征在于，包括：
组件配置模块，提供接口服务，用于负责实例化相应的组件；
通用组件，用于直接与用户交互；
其中通用组件包括：基础布局组件、窗体组件、数据组件、消息组件和导航组件；
所述通用组件中每个组件的配置信息从后台文件读取，组件配置模块为各组件与前端WEB网站提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。
2.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述配置信息包括组件属性信息、组件html显示信息、组件CSS样式信息。
3.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述基础布局组件包括：布局组件、彩组件、字体组件、图标组件和按钮组件；用于Web网站的页面模板的布局。
4.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述窗体组件包括：单选框组件、多选框组件、输入框组件、选择器组件、级联选择器组件、时间选择器组件、日期选择器组件和表单组件；用于Web网站的单个功能页面的实现。
5.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述数据组件包括：表格组件、标签组件、进度条组件、树型控件组件、分页组件；用于数据信息的展现。
6.根据权利要求5所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述数据组件与窗体组件组合使用，可以对服务端数据库数据进行筛选，通过表格形式展现。
7.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述消息组件包括：警告组件、加载组件、消息提示组件和弹框组件；用于Web网站与用户进行交互，反馈Web网站服务端处理的进度与消息。
8.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述导航组件包括：导航菜单组件、标签页组件、面包屑组件、步骤条组件；用于用户登录Web网站后的功能操作引导。
9.根据权利要求1所述的基于Vue架构的WEB前端通用UI组件库，其特征在于，所述后台配置文件采用javascript脚本语言编写。
权　利　要　求　书1/1页CN 109814858 A
基于Vue架构的WEB前端通用UI组件库
技术领域
[0001]本发明涉及计算机技术领域，具体涉及到基于Vue架构的WEB前端通用UI组件库。
背景技术
[0002]World Wide Web(简称WEB)是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。
[0003]Web前端开发技术包括三个要素：HTML(HyperText Markup Language，超文本标记语言)、CSS(Cascading Style Sheet，层叠样式表单)和JavaScript(直译式脚本语言)。随着互联网技术的普及，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于JavaScript为标志的前端技术实现的。
[0004]然而，随着网站需求的惊人增长，传统的基于JavaScript的前端开发已经越来越不能满足开发需要，虽然JavaScript以其灵活性能实现各种网页的需求，但是其代码量却随之大幅度上升，代码的可读性与维护性急剧恶化。另外，WEB前端采用JavaScript语言开发，后端的开发语言却多种多样，这也大大增加了前后端开发人员的沟通难度。
发明内容
[0005]本发明所要解决的技术问题在于针对上述现有技术中的不足，提供基于Vue架构的WEB前端通用UI组件库。
[0006]本发明解决其技术问题所采用的技术方案是：
[0007]基于Vue架构的WEB前端通用UI组件库，包括：
[0008]组件配置模块，提供接口服务，用于负责实例化相应的组件；
[0009]通用组件，用于直接与用户交互；
[0010]其中通用组件包括：基础布局组件、窗体组件、数据组件、消息组件和导航组件；[0011]所述通用组件中每个组件的配置信息从后台配置文件读取，组件配置模块为各组件与前端WEB网站提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。
[0012]作为本发明的进一步技术方案为：所述配置信息包括组件属性信息、组件html显示信息、组件CSS样式信息。
[0013]作为本发明的进一步技术方案为：所述基础布局组件包括：布局组件、彩组件、字体组件、图标组件和按钮组件；用于Web网站的页面模板的布局。
web端登录
[0014]作为本发明的进一步技术方案为：所述窗体组件包括：单选框组件、多选框组件、输入框组件、选择器组件、级联选择器组件、时间选择器组件、日期选择器组件和表单组件；用于Web网站的单个功能页面的实现。
[0015]作为本发明的进一步技术方案为：所述数据组件包括：表格组件、标签组件、进度条组件、树型控件组件、分页组件；用于数据信息的展现。
[0016]作为本发明的进一步技术方案为：所述数据组件与所述窗体组件组合使用，可以对服务端数据库数据进行筛选，通过表格形式展现。
[0017]作为本发明的进一步技术方案为：所述消息组件包括：警告组件、加载组件、消息提示组件和弹框组件；用于Web网站与用户进行交互，反馈Web网站服务端处理的进度与消息。
[0018]作为本发明的进一步技术方案为：所述导航组件包括：导航菜单组件、标签页组件、面包屑组
件、步骤条组件；用于用户登录Web网站后的功能操作引导。
[0019]作为本发明的进一步技术方案为：所述后台配置文件采用javascript脚本语言编写。
[0020]本发明的有益效果：
[0021]本发明通过对WEB网站常规功能的调研与分析归类，设计出低耦合性的可满足WEB 常规功能需求的各类组件，并通过对各类组件可配置性的研究，以配置文件的形式对组件的属性、样式进行配置，可使WEB网站的整体结构更加清晰、易于理解，同时前端组件与WEB 网站之间通过接口联系，可以随时删除、插入和修改，大大增强了WEB网站的易维护性。前端组件的可移植性强，前端组件库之间的低耦合度都促成了WEB网站灵活多变的开发方式及升级方式，可提高网站开发人员的工作效率。
附图说明
[0022]图1为本发明提出的基于Vue架构的WEB前端通用UI组件库结构图。
具体实施方式
[0023]下面结合具体附图和实施例对本发明作进一步说明。对本发明实施例中的技术方案进行清楚、
完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下，所获得的所有其他实施例，都属于本发明保护范围。
[0024]参见图1，为本发明提出的基于Vue架构的WEB前端通用UI组件库结构图。[0025]如图1所示，一种基于Vue架构的WEB前端UI组件库1，包括：组件配置模块11和多个通用组件类；当网站编码人员从前端需要调用后台UI组件库时，需要调用组件配置模块11，组件配置模块11负责实例化相应的组件；每个组件的配置信息从后台配置文件读取，配置信息包括组件的属性信息、html显示信息、CSS3样式信息。后台配置文件采用js为扩展名的文件，是用javascript脚本语言编写的，在本实施例中作为配置文件的标准格式。本发明的通用组件类包括：基础布局组件12、窗体组件13、数据组件14、消息组件15和导航组件16。通用组件中每个组件的配置信息从后台配置文件读取，组件配置模块11为各组件与前端WEB 网站2提供统一的接口服务，根据组件的配置信息实现各组件之间与前端WEB网站的接口连接。
[0026]用户通过配置文件可以快速对组件属性进行设置，实现对组件的插入、筛除和修改操作，以配置文件的形式对组件的属性、样式进行配置，大大增加了组件的灵活性，使得组件能移植于各类不同的WEB网站。
[0027]Vue.js是近几年基于JavaScript语言发展起来用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
[0028]本发明实施例中，对于配置信息中的html显示信息采用HTML5标准规范，其前端代码能够被当下的全部主流浏览器所渲染并显示，使用HTML5标准规范的web桌面应用的兼容性更好。
[0029]后台配置文件用javascript脚本语言编写，由于JavaScript在绝大多数主流浏览器的支持下可以在多种操作下运行，使用JavaScript的灵活更性高，可以将JavaScript代码直接嵌入在HTML代码中，当然也可以写成单独的JavaScript文件有利于页面结构和页面中具体行为的分离，方便错误的排查以及后期的维护。
[0030]基础布局组件12包括：布局(Layout)组件、彩(Color)组件、字体(Typography)组件、图标(Icon)组件和按钮(Button)组件；用户通过配置文件可以快速对组件属性进行设置，用于Web网站的页面模板的布局。
[0031]其中用户通过配置文件对基础布局组件属性进行设置，用于Web网站的页面模板布局，具体为：基础布局组件直接与用户交互，基础布局组件用于Web网站基本页面模板的实现，网站编码人员对页面布局组件属性通过配置文件进行设置；包括：设置布局组件的内容：网页各分栏的间隔是多少，
通过基础的1/24分栏任意扩展组合形成较为复杂的混合布局；设置彩组件的内容：包括网站主、辅助和中性；设置字体组件的内容：包括网站显示的全局字体；设置图标组件的内容：包括默认提供一套常用的图标集合。
[0032]窗体组件13包括：单选框(Radio)组件、多选框(Checkbox)组件、输入框(Input)组件、选择器(Select)组件、级联选择器(Cascader)组件、时间选择器(Time Picker)组件、日期选择器(Date Picker)组件和表单(Form)组件；用户通过配置文件可以快速对组件属性进行设置，用于Web网站的单个功能页面的实现。
[0033]窗体组件直接与用户交互，窗体组件用于Web网站的单个功能页面的实现，网站编码人员对窗体组件属性通过配置文件进行设置，包括：设置单选框组件的内容、禁用状态和按钮样式，通过CSS样式进行配置；设置多选框组件的内容、禁用状态、可选项目数量的限制和按钮样式，通过CSS样式进行配置；设置输入框组件的内容、禁用状态、带icon的输入框、文本域，其中文本域可调整大小、用于输入多行文本信息、尺寸和带输入建议；设置选择器组件的内容，禁用状态和分组信息；设置级联选择组件的内容、禁用状态和默认值；设置时间选择器组件的内容、时间范围，该时间范围可以分为固定时间范围和任意时间范围；设置日期选择器组件的内容、日期单位、日期范围；设置表单组件的内容、对齐方式、表单验证规则、校验规则。
[0034]数据组件14包括：表格组件(Table)、标签(Tag)组件、进度条(Progress)组件、树型控件(Tree)组件、分页(Pagination)组件；用户通过配置文件可以快速对组件属性进行设置，用于数据信息的展现。
[0035]数据组件直接与用户交互，数据组件用于数据信息的展现，网站编码人员对数据组件属性通过配置文件进行设置。包括：设置表格组件的内容、展现形式和固定表头；其中表格组件的展现形式包括基础表格、带斑马纹、带边框和带状态；设置标签组件的内容；设置进度条组件的内容和展现形式，其中进度条组件的展现形式包括：百分比内显、百分比外

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。