首页|尊龙集团中国官方网站科技：企业级前端框架组件化实践

早在2013年W3C提出了“Web Components”草案，，，，，随着前端web应用的迅速生长，，，，，泛起了React、VUE、Angular等主流的组件化开发框架。。。。。。。在VUE中组件是可复用的 Vue 实例。。。。。。。而VUE的插件手艺，，，，，提供了组件间依赖引用、无邪组装的可能。。。。。。。本文实践计划，，，，，以VUE手艺为基础解说。。。。。。。

组件化开发需要思索以下问题：

●怎样以依赖方法使用组件？？？？？？

●怎样包管拆分组件，，，，，整适时气概统一？？？？？？

●怎样管理组件依赖版本？？？？？？

●怎样解决组件（包括公共JS、CSS）依赖引入多次打包压缩问题？？？？？？

组件分类：基础组件和营业组件

企业内部要实现组件化开发，，，，，可以凭证自身营业现真相形，，，，，首先明确好“组件”的界说，，，，，告竣共识。。。。。。。浚�？？？？山榧槲酱罄�，，，，，基础组件和营业组件，，，，，如下所示。。。。。。。

各组件层级关系图如下：

总体设计

首页|尊龙集团中国官方网站科技的前端框架解决计划设计原则，，，，，主要以“开源低耦合”、“无邪组装”、“简朴快捷”等要害词为起点。。。。。。。

开源低耦合

为阻止重复造轮子，，，，，减轻上手难度和学习本钱，，，，，充分复用现在开源手艺的优势和积累。。。。。。。会选择基于“开源框架”为起点，，，，，搭建前端框架。。。。。。。

但同时思量框架焦点功效只管阻止对开源手艺的强绑定，，，，，增添中心层对开源组件举行包装，，，，，以抵达低本钱替换的目的。。。。。。。

无邪组装

前端框架主要是对营业组件的积累，，，，，抽取企业内部普遍营业场景，，，，，沉淀各营业组件库。。。。。。。各组件库是能够自力开发、依赖使用的。。。。。。。除基础组件库可被其他组件依赖使用之外，，，，，只管阻止组件库间高度耦合。。。。。。。

简朴快捷

凭证公司内部现真相形，，，，，前端框架服务于两方面的职员，，，，，一是非专疑习端职员（后端职员），，，，，二是专疑习端职员。。。。。。。

针对“非专疑习端职员”，，，，，需要思量“零JS”代码开发，，，，，以简朴设置方法快速对接后台接口，，，，，开发出页面功效。。。。。。。

针对“专疑习端职员”，，，，，要提供统一区域级、页面级结构组件，，，，，固化样式，，，，，以最洪流平统一页面气概，，，，，镌汰相同管理本钱，，，，，快速协作开发。。。。。。。

前端框架总体设计

如上图所示，，，，，前端框架基于VUE + Element UI等开源手艺为底座，，，，，以减轻开发职员的学习本钱，，，，，而前端框架支持整个应用系统功效的开发。。。。。。。

按组件分类，，，，，前端框架分为了6大模浚�？？？？椤�。。。。。。每个模浚�？？？？樽魑粤Φ墓こ绦嘉寮�，，，，，模浚�？？？？樽约嚎梢员４嬉览倒叵�，，，，，如：工具类和基础组件，，，，，作为最小的模浚�？？？？�，，，，，为其他模浚�？？？？樘峁┲С�，，，，，其他模浚�？？？？榈墓π�，，，，，基于这两个模浚�？？？？榭ⅰ�。。。。。。

前端框架组件视图

●基础组件（Base Components）

基础UI组件，，，，，主要指开源的ELement UI组件和一些算界说扩展的组件，，，，，如：表单控件，，，，，表格，，，，，按钮等

●工具类（Utils Components）

公共要领工具，，，，，包括常用的多组件共用的工具要领类

●营业组件（Business Components）

为镌汰分类历程，，，，，且思量到现在基础营业组件抽取的很少，，，，，我们将营业基础组件和区域组件，，，，，统一归到此模浚�？？？？槔铩�。。。。。。区域组件可以以为是从页面模板组件中抽取出来的小组件。。。。。。。如：盘问页面模板包括表单条件区域、工具栏区域和表格区域（包括分页），，，，，我们可以抽取出表单区域组件、工具栏区域组件、表格区域组件，，，，，每个区域组件主要借助slot插槽等机制，，，，，实现功效扩展

●页面模板（Template Components）

页面模板是将特定的一些常用营业场景封装成模板。。。。。。。浚�？？？？赏ü蚱拥纳柚�，，，，，实现页面营业功效，，，，，适用于后台或前端基础较弱的开发者

页面模板化，，，，，目的是实现80%常见页面功效由“模板+模板数据”天生，，，，，20%不可知足的接纳基于现有组件自界说开发方法开发。。。。。。。示例如下：

●后管框架（admin-Cli）

此模浚�？？？？槲岸丝蚣芴峁┝怂凶榧酆系募苹�。。。。。。主要是针对后端管理系统而搭建的，，，，，包括了后台管理系统常见的功效，，，，，例如登录，，，，，路由菜单，，，，，结构，，，，，主题换肤，，，，，多语言切换，，，，，数据字典，，，，，元素权限控制等

●插件工程（Plugin-Cli）

此模浚�？？？？楣πё榧寮峁┙攀旨苤С帧�。。。。。。脚手架建设出来的前端工程，，，，，自带搭建好了组件开发规范目录结构，，，，，配套Markdown文档自动天生在线文档机制，，，，，组件开发调试运行机制等

前端框架在真实应用中可以应用于三方面：

1、开发插件应用：基于插件脚手架工程，，，，，快速抢建和宣布插件到私服，，，，，供其他项目依赖使用

2、组件库依赖使用：　无论项目使用的开发框架是前端框架提供的脚手架工程，，，，，照旧原生vue脚手架工程，，，，，可以引入前端框架提供的营业组件库

3、后管框架使用：前端框架提供一整体后管基础功效框架，，，，，可直接基于此脚手架工程开发。。。。。。。若是后端职员，，，，，可以借助“页面模板”以JSON设置加后台接口数据驱动，，，，，“零JS”渲染出页面；；；；；若是是前端职员，，，，，可以借助营业组件库提供的组件与页面模板“混淆开发”，，，，，既可JSON设置，，，，，又可使用原生VUE开发

接下来从首页|尊龙集团中国官方网站科技的两个应用场景看前端框架的详细实践。。。。。。。

实践一：功效组件插件化拆分与组合

将公司各营业系统公共功效抽取出来，，，，，形成统一的组件，，，，，以便节约人力开发本钱和维护本钱。。。。。。。使用前端框架的插件脚手架工程，，，，，可以快速搭建一组件化插件工程，，，，，将组件功效宣布成可以使用“模板依赖”的方法，，，，，组件搭配使用。。。。。。。

上图中批注，，，，，基础应用平台的“机构选择”和“职员选择”功效，，，，，可以作为公共功效抽取出组件，，，，，宣布到私服，，，，，由“绩效系统”“内部资金转移定价”等系统使用。。。。。。。绩效系统中的“营业盘问管理”依赖“基础应用平台”的功效完成，，，，，内部资金转移定价中的“定价测算”也是依赖“基础应用平台”功效。。。。。。。

通过前端框架提供的插件脚手架工程，，，，，可以将项目工程组件宣布成插件，，，，，上传到Nexus私有，，，，，其他项目营业系统前端工程以“模浚�？？？？橐览怠狈椒ㄒ览凳褂谩�。。。。。。

实践二： “零JS”开发页面

前端框架中保存大粒度的较量特殊的页面模板组件。。。。。。。页面模板，，，，，是凭证内部营业场景相同交流，，，，，抽取出来的，，，，，以“页面”为整体的解决计划组件。。。。。。。页面模板，，，，，以JSON的方法设置前端页面功效。。。。。。。

古板的VUE实现：

使用表单模板组件设置JSON实现：

古板的VUE实现除了要编写繁琐的HTML和组件标签外还需JS实现解冻提交弹框等事务逻辑。。。。。。。而通过JSON形式只需设置表单控件类型，，，，，操作栏解冻按钮，，，，，表格以及初始化的接口地址即可轻松实现。。。。。。。JSON模板内置数据初始化，，，，，数据提交等与后端交互逻辑以及多种事务联动功效。。。。。。。浚�？？？？⒄叨伎赏ü蚱拥纳柚檬迪终庑┕πА�。。。。。。

再从以下三个维度较量一下这两种开发模式：

从开发职员手艺熟练度来看，，，，，使用VUE开发，，，，，需掌握一定的前端知识。。。。。。。而通过这种JSON设置开发，，，，，开发职员无需任何前端基础，，，，，真正实现开发使用”零门槛”。。。。。。。

从开发时间来看，，，，，开发一个上文所提的盘问表格页面，，，，，使用VUE至少需要1小时左右，，，，，而使用JSON开发，，，，，时间可控制在10分钟内。。。。。。。

使用营业模板组件使用JSON设置开发前端页面模式，，，，，已使用于多个项目。。。。。。。项目客户真实数据反响�。。。。。。和ü庵諮SON设置开发页面，，，，，可快速开发POC页面功效，，，，，与古板的页面开发模式相比，，，，，JSON设置开发至少节约一半人力和页面开发时间。。。。。。。

总结

企业级前端框架具备的能力，，，，，首先需要一个基础框架为支持，，，，，其次以企业内部详细营业场景为起点，，，，，剖析、抽取、一连积累沉淀详细营业组件，，，，，团结统一规范约束，，，，，快速搭建、组装出营业系统的能力。。。。。。。

金融科技

只用这一招，，，，，金融企业数据开发速率就快了5倍！

金融科技

2021.05.21

新一代银行智慧营销中台是怎样施展作用的？？？？？？

金融科技

2021.05.11