基于Vue的业务中台组件设计与实现

李春江 张鹏 李江 郭博阳

1. 中国煤炭地质总局航测遥感局 陕西 西安 710199；

2. 陕西省地理空间信息工程技术研究中心 陕西 西安 710199

引言

Web应用是整个互联网与软件行业的重要组成部分。本文通过对Vue Component和ES6的深入研究，结合业务角度的实际需求，研究并开发了一套具有通用性的组件，便于在其基础上进行二次开发的解决方案。该方案运用前后端分离的MVVM软件架构设计模式，渐进式JavaScript框架Vue.js、Webpack构建技术、Element-UI等技术栈。该方案为企业信息化通用开发框架，即企业总部及下属分公司的其他开发团队采用该方案开发自己需要的业务系统，开发者将重点放在与系统产品有关的具体业务逻辑的设计与开发上。

1 Vue技术栈

本课题将运用当前比较优秀的MVVM开发模式，以及主流前端开发框架Vue2.0、Vue-router、Vuex、ES6语法、Webpack自动构建技术，使用axios来请求接口，实现前后端分离，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助企业快速搭建企业级中后台产品原型[1]。

1.1 组件类型

一般组件分为三种：①页面级别组件，一般在项目页面目录，然后配合路由去使用。②可以复用的组件。③与业务无关的独立基础组件。

1.2 Vue组件化原理

Vue通过全局注册和局部注册两种方式来注册组件。全局组件可以在任何(根)实例中使用，一般使用 Vue.component和Vue.extend 来注册。局部组件只能在特定域下才能使用。

2 组件化设计

组件一般划分为业务组件和功能组件，业务组件又分为UI组件和无状态组件。

2.1 组件设计原则

在组件的设计中，需要考虑以下几点：①可扩展性强：扩展性是我们要考虑的重点，如果不能扩展，就失去了代码的灵活性。②组件中方法函数的抽离，便于复用（尽可能使用方法定义，避免使用Template表达式）。③适度抽象，尽量保证一个组件完成的功能是单一。④颗粒度合适，系统功能被精细到各个独立的组件中。

2.2 组件设计参考点

①组件间props原子化：父子组件通过props属性传值时，尽可能的规定数据类型并且使用原始类型的数据。②巧妙利用slot扩展组件：用好slot可以设计出很多优秀的组件。③合理使用mixin实现复用：Mixins封装可重用的代码，避免重复[2]。

3 组件化的实践应用

组件化是为生产服务的，一切脱离生产环境的设计都是徒劳的。下面从业务角度出发进行组件封装，以此说明组件化在企业开发中的应用。

（1）弹框组件。如下图所示，我们对ElementUI弹框组件进行个性化封装：弹框组件头部进行了设计；内容区通过插槽Slot占位；文本可配置方便国际化；操作区域进行了按钮自定义事件派发；并对弹框打开关闭进行了简单的业务封装，这样页面只负责业务的处理，把弹框的一些属性事件封装起来。

（2）列表组件。如下图所示，Web项目实际开发过程中，列表展示会频繁使用，而且往往需要个性化设计，为了提升开发效率并减少代码的冗余，所以需要对ElementUI的表格分页组件进行二次封装。二次封装列表后页面代码量明显减少很多，代码可读性增强，部分代码如下：

4 结束语

本文通过对组件化深入研究，总结出一套企业开发后台管理系统组件设计方案。该方案以业务为出发点，封装了常用可复用的业务组件，提升了企业开发效率。项目维护通过方便的组件管理系统及组件安装方式将所有的项目中的组件拍平，形成一个大的组件池，解决跨项目共用组件的难度。