1 项目介绍 Esview是一个Vue拖拽可视化开发平台，在接入esview的站点渲染拖拽出来的页面。
github : https://github.com/furioussoul/soul-esview
2 演示
Vue可视化：
3 用户使用 Esview平台分为三个部分：面向用户的组装工厂、面向开发者的开发工厂以及面向后端服务化的暴露接口。 企业级开发中经常会遇到很多交互简单但页面很多的需求，比如报表页面、工单页面， 使用esview可以降低开发时间，原本半小时开发完成的页面，现在5分钟就能完成。
3.1 组装工厂 3.1.1 视图布局
页面组装如图一所示，主要包含五部分：
组件列表 组件列表展示可拖拽的组件（①所示区域部分），可以拖拽到中间的布局块中（②区域）。
布局块 页面初始化时就会生成一个布局块，组件可以被拖拽到布局块中。
组件编辑 右键布局块中的组件可以编辑组件脚本、组件参数，删除组件（③区域） 每个组件，都有可配置的属性、脚本，用户可以重它们， 如，配置按钮组件的颜色、大小，change、input事件（利用eventCenter（事件中心）和它附带的一些对象实现组件间通信）等， 都取决于组件开发者对该组件的预留项。 http://chuantu.biz/t6/116/1509238942x1966911646.gif 顶部页面操作 （④区域）用户可以预览，保存，撤销，反撤销。
左侧导航栏 （⑤区域） 第一个是组件的组装工厂，包括app管理，页面管理，组装页面。 第二个是组件的开发工厂，用户可以编辑组件的全部脚本。
3.1.2 视图脚本（⑥区域） this.model封装了Iview组件对外暴露的接口，修改model属性来控制组件的显示。 利用eventCenter（事件中心）实现组件间通信。
修改组件css：
组件通信（通过事件中心）
mock数据、事件监听，esview把他们挂在在this.model上，和上面的css一样，通过修改model中开放的属性来实现（带有save:false的属性，不会被保存）。
3.2 开发工厂
3.2.1 组件分类管理
在平台中存在了大量的组件的时候，需要对组件进行分类管理。
3.2.2 组件的编辑
组件开发者在这里编写组件代码。
3.2.3 组件的版本管理（开发中）
每个组件都有自己的版本号管理。开发者更新组件代码后，会在组件版本列表中新增一条数据，和git一样。
3.3 系统接入
3.3.1 npm
下载:https://github.com/furioussoul/esview-demo，
安装esview的npm包，配置你添加的AppName和PageName，即可渲染一个spa。
3.3.1 java esview是一个前后端分离项目，采用java（springboot）作为后台，如果你要自己部署，请下载https://github.com/furioussoul/soul-esview， 安装jdk1.80,mysql,数据库表在server包下。
4 原理
3.1 为什么配置了页面就能在接入esview的站点显示？ 组装成的页面其实是一个树形对象，保存时会把这个对象存到数据库，然后接入esview的站点能根据AppName和PageName通过java服务找到这个页面对象， 再通过esview的js代码渲染出整个页面。
3.2 如何拖拽出页面？ 组件的属性如3.2.2描述的那样，整个页面是树形型的数据结构，每次修改节点的属性都会重新组件（每个组件对象包含一个render函数，这个函数接收vue的createEement函数）。 拖放时复制一份组件对象，存入被放入的父组件的children数组中，这样父组件就会重新渲染，我们就能在页面上看到变化了。
3.3 为什么修改model能让视图变化？
因为esview将vue组件的接口指向model对象的属性，因此修改model.style的属性相当于修改了createElement方法中的style属性
3.4 组件如何通信？
采用事件中心进行通信，将事件中心挂在在vue的creatElement上，这样就能在script接口函数中扩展使用了。
5 结语 目前esview还在开发中，目标年底开发完，后续会添加组件重复拖动，权限模块等功能。 希望大家多多支持，给gitgub点赞，最后祝esview这个项目越做越好！