AG电投厅科技：企业级前端框架组件化实践

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

●页面模板（Template Components）

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

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

●后管框架（admin-Cli）

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

●插件工程（Plugin-Cli）

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

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

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

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

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

接下来从AG电投厅科技的两个应用场景看前端框架的详细实践。

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

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

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

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

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

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

古板的VUE实现：

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

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

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

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

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

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

总结

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

金融科技

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