其实，只是想找个轮子
前序：
- AntV-官网
- x6-官网
- x6-人工智能建模 DAG 图
- x6-v2笔记
碎碎念：
- 此文个人笔记，官网文档搬运
- 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高
- demo 待上传中【ps：因demo已魔改，那应该是不可能上传了 →_→ 】
- v1版本过于繁琐，想入手还是请看v2版本
- x6 版本：1.32.8
- x6-vue-shape 版本：1.4.0
- composition-api 版本：1.7.0
- vue 版本：2.6.11
- vue-template-compiler 版本：2.6.11
- Element-UI 版本：2.15.9
一：步骤：
1 —— 创建vue2项目：详情请看 vue开发 —— CLI（开发环境）搭建
2 —— 引入开发组件【Element-UI、antv.x6】
npm i element-ui
npm install @antv/x6
npm install @antv/x6-vue-shape
// 在vue2.x 若你引入x6-vue-shape，目前这个版本是必须要的，因由在常见问题2
npm install @vue/composition-api --dev
2.1 —— 生成的项目目录如下：
Demo
├─ node_modules
├─ public
├─ favicon.ico
└─ index.html
├─ src
├─ assets
└─ logo.png
├─ components
└─ HelloWorld.vue
├─ App.vue
└─ main.js
├─ .browserslistrc
├─ .eslintrc.js
├─ babel.config.js
├─ package.json
├─ package-lock.json
└─ README.md
2.2 —— 修改生成的项目【编辑package.json、编辑main.js、编辑App.vue、新增vue.config.js】
// package.json
// 此处修改为解决常见问题一
"dependencies": {
"vue": "2.6.11"
},
"devDependencies": {
"vue-template-compiler": "2.6.11"
}
// main.js
import Vue from "vue";
import App from "./App.vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
render: (h) => h(App),
}).$mount("#app");
// App.vue
// vue.config.js
// 此处新增为解决常见问题二
module.exports = {
runtimeCompiler: true
}
2.3 —— 开启搬运工生涯【创建画布、创建节点模板、新增节点、新增多个节点、定时改变多个节点状态、达成官网效果、搭配Element-UI、收工】
官网效果图
2.3.1 —— 创建画布
// App.vue
创建画布
2.3.2 —— 创建节点模板
// components/NodeTemplate.vue
![]()
{{ label }}
![]()
2.3.3 —— 新增节点
// App.vue
单个节点
2.3.4 —— 新增多个节点
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
多个节点
2.3.5 —— 定时改变多个节点状态
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
定时改变多个节点状态
2.3.6 —— 添加属性达成官网效果
// App.vue
// 因一些固定数据过于庞大，省略的部分请复制上一节的代码数据
达成效果
2.3.6 —— 废话了这么多，就是和一开始引入的Element-UI无关，客官莫急，菜来也
// components/EleTemplate.vue
// App.vue
import eletemplate from '@/components/EleTemplate';
// 注册 eletemplate
Graph.registerVueComponent(
'eletemplate',
{
template: `
搭配Element-UI效果图
2.3.7 —— 收工，翻归卖豉油
二：常见问题：
1 —— 运行时编译报错如下：
Vue packages version mismatch:
- [email protected] (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- [email protected] (D:\x6-dag\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
Error:
Vue packages version mismatch:
- [email protected] (D:\x6-dag\node_modules\vue\dist\vue.runtime.common.js)
- [email protected] (D:\x6-dag\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
解决方法：
// package.json
// 仅修改 package.json的dependencies节点的vue版本和devDependencies节点的vue-template-compiler版本，
// 均需要去掉^，保持2者的版本一致，重新npm i 再启动
"dependencies": {
"vue": "2.6.11"
},
"devDependencies": {
"vue-template-compiler": "2.6.11"
}
2 —— 运行时浏览器报错如下：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
解决方法：
// 项目根目录创建vue.config.js并添加如下内容
// vue.config.js
module.exports = {
runtimeCompiler: true
}
2 —— 编译时报错如下：
This dependency was not found:
* @vue/composition-api in ./node_modules/vue-demi/lib/index.esm.js
To install it, you can run: npm install --save @vue/composition-api
解决方法：
npm install --save @vue/composition-api
3 —— 当卸载composition-api在运行时不会报错正常运行，问题2不会在提示，同时缺失这个，导致vue-demi的判断会一直是isVue2为false，isVue3为true，从而当渲染vue模板时会一直走vue3的方法，个人认为vue-demi应该去检查运行中的vue对象，由vue对象的某些vue3特性来判断是否走vue3内容，vue-demi是x6-vue-shape的依赖非本项目的依赖：
4 —— 拖曳创建的节点，使用node.setData不触发绑定的change:data事件，但是实际上打印出来的node的data的确改动了，在数据为null的情况下，这个的确生效，但是并不是通过change:data事件触发的，暂时从源码也没法看出错误点，还没排除新版本是否已修复，源码看的新版本的，后续会更新此版本写的demo：setData为updateData
问题因由：并不是updateData还是setData的没生效的问题或者拖曳生成或者版本的问题（源码版本搜索里面也可以找到和版本有一点点的关系，毕竟之前是没加这个相同就不更新的原则），而是通过node.getData()直接操作了数据，导致setData比较了一致就不更新，其实这也是可以后期修改下，直接通知vue组件更新的同时更新node数据，脱离这种setData的内置方法，但是仅仅是一个权宜之计，也是自己写的时候太过于不顾前后导致的低级bug
解决方法：
不要直接操纵node的data数据，需要通过其自身提供的方法比如setData或者updateData，但是在考虑到x6它自身这种结合vue这种框架的事件绑定脱离了这种框架定义的东西时，其实可以适当改造，让x6更符合vue的写法，而不是遵循它自身这种数据变化的写法