vue2中使用logicflow

在Vue2中使用LogicFlow，可以按照以下步骤进行：

1. 安装LogicFlow

可以通过npm或者yarn来安装LogicFlow，命令如下：

npm install @logicflow/core --save

或者

yarn add @logicflow/core

2. 引入LogicFlow

在Vue2的组件中引入LogicFlow，可以在`<script>`标签中添加如下代码：

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

3. 在Vue2中使用LogicFlow

在Vue2组件中使用LogicFlow，可以在`mounted()`方法中创建LogicFlow实例，代码如下：

mounted() {
  const lf = new LogicFlow({
    container: document.querySelector('#container'),
    // 其他配置项
  });
}

其中，`container`是在模板中定义的元素，用于显示LogicFlow流程图。可以在模板中添加如下代码：

<div id="container"></div>

4. 添加节点和连线

可以通过LogicFlow提供的API来添加节点和连线。例如，可以添加一个开始节点和一个结束节点，代码如下：

mounted() {
  const lf = new LogicFlow({
    container: document.querySelector('#container'),
    // 其他配置项
  });
  
  const startNode = lf.addNode({
    type: 'start',
    x: 100,
    y: 100,
    text: '开始',
  });
  
  const endNode = lf.addNode({
    type: 'end',
    x: 400,
    y: 100,
    text: '结束',
  });
  
  lf.addLine({
    type: 'line',
    sourceNodeId: startNode.id,
    targetNodeId: endNode.id,
    text: '连接线',
  });
}

通过以上步骤，就可以在Vue2中使用LogicFlow来创建流程图了。