基于Vue的任务节点图绘制插件（vue-task-node）

简介：

vue-task-node 是一个基于Vue的任务节点图绘制插件（vue-task-node is a Vue based task node mapping plug-in） 此篇博客会随插件版本的更新而不断更新，这里的教材说明可能不是最新的，请移步👉在线教程 vidanao.com/ 起源：mml机器学习平台:vidanao.com/ml/#/

在线Demo
codesandbox.io/embed/5vvpy…

首先来张图展现一下

❤MyHome:🏡
github：github.com/Liwengbin
思否：segmentfault.com/u/vidanao
掘金：juejin.im/user/5bd967…
npm：www.npmjs.com/~liwenbing

✉：liwenbingmsc@qq.com

1、安装

npm install vue-task-node -S

复制代码

2、引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import {TaskNode, TaskNodeStore} from 'vue-task-node'
import 'vue-task-node/dist/css/vnode.css'
Vue.use(TaskNode)
Vue.config.productionTip = false
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    TaskNodeStore
  }
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})
复制代码

3、教程

vidanao.com/

5、版本

版本	说明	更新时间	是否支持拖拽	是否支持节点连线
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.2.0	新增节点连线	2019年5月12日	是	是
1.2.1	新增路径鼠标事件	2019年5月23日	是	是
1.3.0	工做区外拖拽节点到工做区内	2019年6月23日	是	是
1.3.3	新增全局参数设置	2019年6月29日	是	是
1.3.4	工做区缩放	2019年7月8日	是	是

6、将来新版本

1.3.x 节点拖拽出工做区问题

7、结语

原文在GitHub
若是以为对你有帮助 但愿能给我一个小小的start vue-task-node
如过你对vue-task-node感兴趣就联系我和我一块儿开发他吧😘
感谢您看到最后！