基于Vue的任务节点图绘制插件节点可拖拽多连线样式（vue-task-node）可用于机器学习，UML，及事物流程的绘制...

#vue-task-node

在线Demo

1.0.x 版本 https://codesandbox.io/s/9413yop49r
1.1.x 版本 https://codesandbox.io/s/2wv588orlr

vue-task-node 是一个基于Vue的任务节点图绘制插件（vue-task-node is a Vue based task node mapping plug-in）
此文章是续之前1.0.x(https://segmentfault.com/a/11... 的更新版本

▲ 1.0.x -> 1.1.x

①重新组织了节点，使节点具有可扩展性。
②新增节点可拖拽。
③样式使用less编写，提高了后期样式的维护成本。
④通过阅读 iview（https://github.com/iview/iview） 及 element（https://github.com/ElemeFE/el...）的源码，目录结构，传参等都借鉴了其中的方法。

✉：liwenbingmsc@qq.com

一、安装

npm install vue-task-node -S

二、引入

import Vue from 'vue';
import VueRouter from 'vue-router';
import Routers from './router.js';
import VueTaskNode from 'vue-task-node'
import "vue-task-node/dist/css/vnode.css"

Vue.use(VueRouter);
Vue.use(VueTaskNode);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

三、教程

http://vidanao.com/vnode

四、版本

版本	说明	更新时间	是否支持拖拽	是否支持节点连线
1.0.0	开端,根据数据绘制任务节点	2019年1月16日	否	否
1.0.1	修改代码规范Eslin	2019年1月17日	否	否
1.0.2	调试入口文件	2019年1月17日	否	否
1.0.3	npm下载包错误修改	2019年1月17日	否	否
1.0.4	添加鼠标右击后返回右击的node数据	2019年1月18日	否	否
1.0.x	优化配置文件	2019年1月x日	否	否
1.1.0	代码结构调整，组件重新封装，样式使用less写	2019年2月28日	是	否
#	#	#	#	#
1.1.1	解决dist文件无法上传问题	2019年2月28日	是	否
1.1.2	解决dist文件无法上传问题	2019年2月28日	是	否
1.1.3	解决index.js找不到组件问题	2019年2月28日	是	否
1.1.4	解决index.js找不到组件问题	2019年2月28日	是	否
1.1.5	调整工作区样式问题	2019年3月1日	是	否
1.1.6	调整节点的事件传递	2019年3月1日	是	否
1.1.x	优化样式，及配置文件	2019年3月x日	是	否

未来版本	说明	更新时间	是否支持拖拽	是否支持节点连线
1.2.x	新增节点间连线	2019年4月x日	是	是