入门

本指南涵盖了设置和使用 Vue Flow 的基础知识。您将学习如何安装 Vue Flow、配置它并创建您的第一个流程图。

Note

如果你正在寻找有关如何设置 Vue 项目的指南，请查看官方 Vue 文档。

先决条件 ​

在系好安全带之前，请确保您已配备：

• Node.js v20 或更高版本
• Vue 3.3 或更高版本

代码沙盒 ​

如果您正在寻找一种快速入门的方法，请查看CodeSandbox 模板。

安装 ​

使用您喜欢的包管理器来安装 Vue Flow：

npm

$ npm add @vue-flow/core

pnpm

$ pnpm add @vue-flow/core

yarn

$ yarn add @vue-flow/core

快速入门

在 Vue Flow 中，图由节点和边组成。

每个节点或边都需要一个唯一的 ID。

节点还需要 XY 位置，而边需要源节点 ID 和目标节点 ID。

Note

要确保正确显示Vue Flow，请确保包含必要的样式。

/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

有关更多信息，请参阅 主题 部分

这里有一个简单的例子让你开始使用：

(译者：这里仅翻译ts的代码注释)

js

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'

// these are our nodes
const nodes = ref([
  // an input node, specified by using `type: 'input'`
  { 
    id: '1',
    type: 'input', 
    position: { x: 250, y: 5 },
    // all nodes can have a data object containing any data you want to pass to the node
    // a label can property can be used for default nodes
    data: { label: 'Node 1' },
  },

  // default node, you can omit `type: 'default'` as it's the fallback type
  { 
    id: '2', 
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },

  // An output node, specified by using `type: 'output'`
  { 
    id: '3', 
    type: 'output', 
    position: { x: 400, y: 200 },
    data: { label: 'Node 3' },
  },

  // this is a custom node
  // we set it by using a custom type name we choose, in this example `special`
  // the name can be freely chosen, there are no restrictions as long as it's a string
  {
    id: '4',
    type: 'special', // <-- this is the custom node type name
    position: { x: 400, y: 200 },
    data: {
      label: 'Node 4',
      hello: 'world',
    },
  },
])

// these are our edges
const edges = ref([
  // default bezier edge
  // consists of an edge id, source node id and target node id
  { 
    id: 'e1->2',
    source: '1', 
    target: '2',
  },

  // set `animated: true` to create an animated edge path
  { 
    id: 'e2->3',
    source: '2', 
    target: '3', 
    animated: true,
  },

  // a custom edge, specified by using a custom type name
  // we choose `type: 'special'` for this example
  {
    id: 'e3->4',
    type: 'special',
    source: '3',
    target: '4',

    // all edges can have a data object containing any data you want to pass to the edge
    data: {
      hello: 'world',
    }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
    <template #node-special="specialNodeProps">
      <SpecialNode v-bind="specialNodeProps" />
    </template>

    <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
    <template #edge-special="specialEdgeProps">
      <SpecialEdge v-bind="specialEdgeProps" />
    </template>
  </VueFlow>
</template>

<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>

ts

<script setup lang="ts">
import { ref } from 'vue'
import type { Node, Edge } from '@vue-flow/core'  
import { VueFlow } from '@vue-flow/core'

// 这些组件仅作为如何使用自定义节点或边的示例
// 您可以在文档的示例页面中找到许多关于如何创建这些自定义组件的示例
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'

// 这些是我们的节点
const nodes = ref<Node[]>([
  // 输入节点，使用 `type: 'input'` 指定
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    // 所有节点都可以有一个数据对象，其中包含要传递给该节点的任何数据
    // `label` 属性可用于默认节点
    data: { label: 'Node 1' },
  },

  // 默认节点，你可以省略 `type: 'default'`，因为它是回退(fallback)类型
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },

  // 输出节点，使用 `type: 'output'` 指定
  {
    id: '3',
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 3' },
  },

  // 这是一个自定义节点
  // 我们使用自己选择的自定义类型名来设置它，在这个例子中是 `special`
  // 名称可以自由选择，没有任何限制，只要它是一个字符串
  {
    id: '4',
    type: 'special', // <-- this is the custom node type name
    position: { x: 400, y: 200 },
    data: {
      label: 'Node 4',
      hello: 'world',
    },
  },
])

// 这些是我们的边
const edges = ref<Edge[]>([
  // 默认贝塞尔(bezier)边
  // 由边缘id、源节点id和目标节点id组成
  {
    id: 'e1->2',
    source: '1',
    target: '2',
  },

  // 设置 `animated: true`来创建一个动画的边缘路径
  {
    id: 'e2->3',
    source: '2',
    target: '3',
    animated: true,
  },

  // 使用自定义类型名称指定的自定义边缘
  // 对于这个例子，我们选择 `type: 'special'`
  {
    id: 'e3->4',
    type: 'special',
    source: '3',
    target: '4',

    // 所有边都可以有一个数据对象，其中包含您想要传递给边的任何数据
    data: {
      hello: 'world',
    }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <!-- 通过使用插槽将自定义节点类型绑定到组件，插槽名称总是 `node-<type>` -->
    <template #node-special="specialNodeProps">
      <SpecialNode v-bind="specialNodeProps" />
    </template>

    <!-- 通过使用插槽将自定义边缘类型绑定到组件，插槽名称总是 `edge-<type>` -->
    <template #edge-special="specialEdgeProps">
      <SpecialEdge v-bind="specialEdgeProps" />
    </template>
  </VueFlow>
</template>

<style>
/* 导入Vue Flow工作所需的样式 */
@import '@vue-flow/core/dist/style.css';

/* 导入默认主题，这是可选的，但通常推荐 */
@import '@vue-flow/core/dist/theme-default.css';
</style>

TypeScript

由于 Vue Flow 完全用 TypeScript 编写，因此我们强烈建议使用 TypeScript 来改善开发人员体验并防止常见错误。必要的类型定义包含在库中。

有关更多信息，请查看我们的 TypeDocs 文档。