# @braks/vue-flow 中文文档

规范地址：https://npmcn.com/package/%40braks/vue-flow/

版本：0\.4\.41
npm 元数据更新时间：2022-11-16T10:28:08.312Z
中文译文更新时间：2026-11-08T13:57:22.103Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40braks/vue-flow
原文对照：https://npmcn.com/package/%40braks/vue-flow/?lang=original
项目主页：https://github.com/bcakmakoglu/vue-flow#readme
源码仓库：https://github.com/bcakmakoglu/vue-flow

弃用说明：Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：814 kB，86 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue ^3\.2\.25
- 首次发布：2021-11-06T16:04:45.899Z
- 最新版本发布：2022-10-07T20:58:04.921Z
- 近 30 天下载量：3574（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：130（近 12 个月 0 个）

## 中文简介

[![Vue flow](https://npmcn.com/package/%40braks/vue-flow/vue-flow.gif)](https://vueflow.dev/) ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow) ![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow) ! \[GitHub 代码大小以字节计\] (ht)

## 安装

```sh
npm install @braks/vue-flow
```

也可以使用：`pnpm add @braks/vue-flow`、`yarn add @braks/vue-flow`、`bun add @braks/vue-flow`

## README

# Vue 流量 QQ

[![Vue flow](https://npmcn.com/package/%40braks/vue-flow/vue-flow.gif)](https://vueflow.dev/) ![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow) ![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow) ![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)

**Vue Flow:可高度定制的Vue 3 Flowchart组件.**

通过Vue Flow,你可以构建自己的,定制的以节点为基础的应用程序,如静态图,甚至更复杂 互动编辑!

你可以找到一个详细的解释 如何开始在 [文档](https://vueflow.dev/guide/) 或检查 页:1 [实例](https://vueflow.dev/examples/)。 。 。 .

## 目录

-   [\* 特性](https://npmcn.com/package/%40braks/vue-flow/#readme--features)
    
-   [QQ 设置](https://npmcn.com/package/%40braks/vue-flow/#readme--setup)
    
-   [QQ 快速启动](https://npmcn.com/package/%40braks/vue-flow/#readme--quickstart)
    
    -   [\*](https://npmcn.com/package/%40braks/vue-flow/#readme--vue-2)
-   [发展](https://npmcn.com/package/%40braks/vue-flow/#readme--development)
    
    -   [减量容器](https://npmcn.com/package/%40braks/vue-flow/#readme--dev-container)
-    [![discord logo](https://api.iconify.design/logos:discord-icon.svg) 解析器](https://npmcn.com/package/%40braks/vue-flow/#readme--discord)
    
-   [特别谢谢](https://npmcn.com/package/%40braks/vue-flow/#readme--special-thanks)
    
-   [星际迷航](https://npmcn.com/package/%40braks/vue-flow/#readme--stargazers)
    

## \* 特性

-   👶 **方便的设置**: 开始无麻烦 - 内建缩放( P) 特性, 元素拖放、 选择和更多
    
-   🎨 **可自定义**: 使用自定义节点、边缘和连接线并扩展Vue Flows的功能
    
-   🚀 **快点**: 跟踪被动变化,只重新提交适当的元素
    
-   🧲 **Utils 组成( C)**: 带有图形辅助器的来来来来来来来来来来来来来来来来来来来来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来 来来来来来 来来来 来来来 来来来来 来来来来 来来 来来 来来来来 来来 来来 来来 来 来来来 来 来来 来来 来 来 来 来来 来来 来 来来 来 来 来 来来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来 来
    
-   📦 **其他组件**数字 :
    
    -   QQ背景:有两个内置模式和一些配置选项,如高度,宽度或颜色.
        
    -   QQ 最小映射: 在右下角的小地图形状显示当前节点
        
    -   QQ 控制: 控制从左下方的面板放大行为
        
    -   还有很多...
        
-   🦾 **可靠性**: 完全写入类型脚本
    

## QQ 设置

```bash
$ npm i @braks/vue-flow

# or
$ yarn add @braks/vue-flow
```

## QQ 快速启动

流动包含 **节点** 财务报告和审定财务报表 **边缘** (或者只是节点). 他们一起叫 **要素**。 。 。 .

**每个元素都需要独特的标识.**

节点还需要XY位置. 一个边缘需要一个源(node id)和一个目标(node id).

基本布局是这样的:

```vue
<!-- Flowchart.vue -->
<script setup>
import { VueFlow } from '@braks/vue-flow'

const elements = ref([
  {
    id: '1',
    label: 'node 1',
    position: { x: 100, y: 100 },
  },
  {
    id: '2',
    label: 'node 2',
    position: { x: 100, y: 200 },
  },
  {
    id: 'e1-2',
    target: '2',
    source: '1',
  },
])
</script>

<template>
  <VueFlow v-model="elements"></VueFlow>
</template>
```

⚠️ **确保导入必要的样式 :**

```css
/* import the required styles */
@import "@braks/vue-flow/dist/style.css";

/* import the default theme (optional) */
@import "@braks/vue-flow/dist/theme-default.css";
```

### \*

**_这个图书馆与Vue 2不相通._**

Vue Flow使用独有于Vue 3的特性,因此 没有支持Vue 2,未来也不会有任何支持,抱歉.

## 发展

### 先决条件

-   [节点.js v12+](https://nodejs.org/)
-   [小时](https://pnpm.io/)

```bash
# skip if you already have pnpm installed
$ npm i -g pnpm

# start examples
$ pnpm dev

# build all packages
$ pnpm build
```

### 减量容器

为了开始使用开发容器,安装 `Docker` 扩展 为VSCode. 在安装扩展后, 打开连接菜单 或通过命令标签打开. 选择 `Open Folder in Container` 选项.

开发容器将旋转所有软件包实例应用并转发 端口到您的机器.

## ![discord logo](https://api.iconify.design/logos:discord-icon.svg) 解析器

[加入 Vue Flow Discord 服务器!](https://discord.gg/z4FMpfTugW)

在这里,你可以向社区提问, 提出新的想法 或者分享你和Vue Flow共同创造的作品.

## 特别谢谢

这个项目是用

-   [反应流量](https://reactflow.dev/)
    
    -   Vue 流量主要基于 [网络孩子](https://webkid.io/) [反应流量](https://reactflow.dev/)我衷心感谢 他们的惊人的工作! 没有它们,Vue Flow就不存在. 请考虑 [捐赠](https://github.com/sponsors/wbkd) 给他们.
-   [D3.js (英语)](https://d3js.org/)
    
    -   D3使得Vue Flow中的所有缩放和泛动作都成为可能.
-   [虚拟使用](https://vueuse.org/)
    
    -   VueUse是一套基本的 Vue 组成公用事业

## 星际迷航

多亏了离开明星的善良个人. 非常感谢你的支持!

[![Stargazers for @braks/vue-flow](https://reporoster.com/stars/bcakmakoglu/vue-flow)](https://github.com/bcakmakoglu/vue-flow/stargazers)

## 常见问题

### @braks/vue-flow 是什么？

\! \[GitHub 代码大小以字节计\] \(ht\)注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.

### 如何安装 @braks/vue-flow？

在项目目录运行 npm install @braks/vue-flow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.2\.25）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @braks/vue-flow 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @braks/vue-flow 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @braks/vue-flow 可以商用吗？

@braks/vue-flow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @braks/vue-flow 的下载量有多少？

根据 npm 官方下载统计，@braks/vue-flow 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,574 次，日均约 119 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @braks/vue-flow 还在维护吗？

最新版本 0\.4\.41 发布于 2022/10/08（4 年前）；至今共发布 130 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/11/07。作者已将其标记为弃用，新项目建议寻找替代方案。