AntV 开发 —— x6 图编辑引擎 v2

前文再续

前序：

• v1笔记

碎碎念：

• 此文个人笔记，官网文档搬运
• x6 版本：2.9.7
• x6-vue-shape 版本：2.0.11
• x6-plugin-selection 版本：2.1.7
• vue 版本：2.6.11
• vue-template-compiler 版本：2.6.11
• Element-UI 版本：2.15.13
• 示例只展示单个节点的，多节点请下载demo自行查看源码
• demo均在易水GIT

一：步骤：

1 —— 创建vue2项目：详情请看 vue开发 —— CLI(开发环境)搭建

2 —— 引入开发组件【Element-UI、antv.x6】

npm i element-ui
npm install @antv/x6 
npm install @antv/x6-vue-shape
npm install @antv/x6-plugin-selection

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 —— 修改生成的项目【编辑main.js、编辑App.vue、新增Dag.vue、OneNode.vue】

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import '@/assets/base.scss';

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

// App.vue

// Dag.vue

// OneNode.vue

单节点

两节点

多节点

2.3 —— 收工，翻归卖豉油

二：常见问题：

暂未发现

三：吹水：

1 这个版本比版本一要友好了很多，特别是在vue的处理上，但是很可惜目前很多demo均是基于react的，但是不影响vue的用户，以上面的列子来说，主要就是注册模块、创建画布、创建节点基本步骤即可，其他都是和以前怎么操作就怎么操作，不管是哪个框架，这次用v2重写一遍，相对于写v1理顺了很多，3个小demo，这种拆解官方demo的方式不一定让你得到什么，demo本就没什么可说的内容，但是希望能让你看清，这个是怎么和框架脱钩又和框架组合的，在处理需求时，看清需求，用对方式，而不是硬套框架这些

2 至于版本1和2如何抉择，建议是能上版本2不要犹豫，版本一的教程可以不看了，但是相比这次版本更新，这个版本2还是存在一些问题，并没达到很好的效果，拖动也不够流畅，有些东西还是可以封装下，减少重复劳动