因为主要使用的是vue进行开发,而流程图绘制工具主要也就那么几个,jsplumb、Jtopo这些都是比较成熟的绘制工具了,直接使用的话有点复杂,样式也不是很好看,找了半天找到一个比较简单的,学习下
学习曲线还算简单,照操作流程一步步执行。
1、进入上一章的空白工作空间
2、npm i -S vuedraggable
3、npm i codemirror --save
4、npm i --save lodash
5、npm install element-ui -S
6、npm install --save vue-codemirror
7、下载easy-flow项目包,将easy-flow/src/components/ef 目录复制到自己工程的一个目录下(如/src/views)
8、修改main.js,引入elementUI和easy-flow样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './views/ef/index.css'
Vue.use(ElementUI, {size: 'small'})
9、修改/src/views/ef/panel.vue里面的路径
import './jsplumb'
import { easyFlowMixin } from './mixins'
import flowNode from './node'
import nodeMenu from './node_menu'
import FlowInfo from './info'
import FlowHelp from './help'
import FlowNodeForm from './node_form'
import lodash from 'lodash'
import { getDataA } from './data_A'
import { getDataB } from './data_B'
import { getDataC } from './data_C'
import { getDataD } from './data_D'
import { getDataE } from './data_E'
import { ForceDirected } from './force-directed'
10、修改router后展示效果如下