因為主要使用的是vue進行開發(fā)，而流程圖繪制工具主要也就那么幾個老翘，jsplumb、Jtopo這些都是比較成熟的繪制工具了锻离，直接使用的話有點復(fù)雜铺峭，樣式也不是很好看，找了半天找到一個比較簡單的汽纠，學(xué)習(xí)下
學(xué)習(xí)曲線還算簡單卫键，照操作流程一步步執(zhí)行。
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 目錄復(fù)制到自己工程的一個目錄下（如/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后展示效果如下
