# vue3_process

**Repository Path**: codingtodie/vue3_process

## Basic Information

- **Project Name**: vue3_process
- **Description**: 使用vue3+vite构建，实现流程图功能。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2025-07-10
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, process, 流程图

## README



# Vue Flow Editor

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Vue](https://img.shields.io/badge/Vue-3-green)](https://vuejs.org/)
[![AntV X6](https://img.shields.io/badge/AntV_X6-2.x-blue)](https://x6.antv.vision/)
[![Build Status](https://img.shields.io/badge/Build-Passing-green)](https://github.com/your-username/vue-flow-editor/actions)

**一个基于 Vue 3、Vite 和 AntV X6 构建的流程图编辑器，打造直观的流程图工具，助你深入理解前端可视化开发！**

本项目通过逐步实现流程图编辑器的核心功能（布局、节点拖拽、连接线绘制、持久化等），帮助开发者学习 Vue 3 组件化开发、AntV X6 图编辑和前端系统设计。代码简洁、可运行，包含全面的测试用例，适合初学者、进阶者和面试准备者。

## 项目背景

Vue Flow Editor 是一个高性能的流程图编辑工具，广泛应用于工作流管理、数据可视化和交互式图表设计。本项目通过 Vue 3 和 AntV X6 手写流程图编辑器的核心功能，深入剖析其底层实现，包括：
- 基础布局（侧边栏、顶部栏、内容区域）
- 节点拖拽（圆形、菱形节点）
- 连接线绘制
- 图形样式自定义
- 数据持久化（本地存储）
- 性能优化（虚拟化渲染）
- 代码重构与扩展

项目灵感来源于 [Gitee 社区](https://gitee.com/) 和 [AntV X6 官方文档](https://x6.antv.vision/)，我们对其进行了优化：
- 将复杂功能拆分为多个模块，逻辑更紧凑。
- 提供详细实现步骤、图表和面试要点。
- 增强代码健壮性，添加单元测试支持。

## 项目特点

- **教学导向**：每篇博客对应一个功能模块，循序渐进，适合系统学习。
- **可运行代码**：所有代码均可直接运行，附带单元测试用例。
- **面试准备**：涵盖前端高频考题（如组件化设计、AntV X6 应用），提供针对性答案。
- **图文并茂**：UML 图、流程图、交互示意图帮助理解复杂概念。
- **生产级健壮性**：异常处理、资源清理、代码注释完善。

## 目录结构

```plaintext
vue-flow-editor/
├── src/
│   ├── components/
│   │   ├── LayoutSidebar.vue     # 侧边栏组件
│   │   ├── LayoutTopbar.vue      # 顶部栏组件
│   │   ├── NodeCircle.vue        # 圆形节点
│   │   ├── NodeDiamond.vue       # 菱形节点
│   │   ├── FlowCanvas.vue        # 流程图画布
│   │   └── ...                   # 后续组件
│   ├── assets/
│   │   ├── styles/               # 边框样式等
│   │   └── images/               # 静态资源
│   ├── App.vue                   # 主应用入口
│   ├── main.js                   # 入口文件
│   └── tests/                    # 测试用例
│       ├── LayoutSidebar.spec.js # 侧边栏测试
│       ├── NodeCircle.spec.js    # 节点测试
│       └── ...
├── public/                       # 静态文件
├── vite.config.js                # Vite 配置文件
├── package.json                  # 项目依赖
├── .gitignore                    # Git 忽略文件
├── README.md                     # 项目说明
└── docs/                         # 博客文档和图表
    ├── images/                   # UML、流程图等
```

## 快速开始

### 环境要求

- **Node.js**: v20.x 或以上
- **Vite**: 最新版本
- **Vue**: 3.x
- **AntV X6**: 2.x
- **IDE**: VS Code（推荐）、WebStorm 或其他支持 JavaScript 的编辑器
- **Git**: 用于克隆仓库

### 安装步骤

1. **克隆仓库**：
   ```bash
   git clone https://gitee.com/codingtodie/vue3_process.git
   cd vue-flow-editor
   ```

2. **安装依赖**：
   ```bash
   npm install
   ```

3. **启动开发服务器**：
   ```bash
   npm run dev
   ```

4. **访问应用**：
   在浏览器中打开 `http://localhost:5173/createFlow` （默认端口）。

5. **运行测试**：
   ```bash
   npm run test
   ```
   或在 IDE 中运行 `src/tests` 下的测试用例（如 `LayoutSidebar.spec.js`）。

6. **验证功能**：
   运行项目后，从侧边栏拖动节点到画布，点击节点绘制连接线，检查交互效果。

### 示例代码

实现一个基础流程图画布（第3篇）：
```vue
<template>
  <div ref="container" class="flow-canvas"></div>
</template>

<script>
import { Graph } from '@antv/x6';
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  name: 'FlowCanvas',
  setup() {
    const container = ref(null);
    onMounted(() => {
      const graph = new Graph({
        container: container.value,
        width: 800,
        height: 600,
      });
      graph.addNode({
        shape: 'circle',
        x: 100,
        y: 100,
        width: 60,
        height: 60,
        label: 'Start',
      });
    });
    return { container };
  },
});
</script>

<style scoped>
.flow-canvas {
  border: 1px solid #e8e8e8;
}
</style>
```

## 开发与贡献

欢迎社区贡献！请按照以下步骤参与开发：

1. **Fork 仓库**：
   Fork 本仓库到您的 Gitee 账户。

2. **创建功能分支**：
   ```bash
   git checkout -b feat/new-feature
   ```

3. **提交更改**：
   ```bash
   git commit -m "feat: 添加新功能"
   ```

4. **推送并提交 Pull Request**：
   推送分支到您的仓库并在 GitHub 上提交 Pull Request。

5. **代码规范**：
   提交前运行以下命令以确保代码质量：
   ```bash
   npm run lint
   ```

## 联系方式

- **Issues**：如有问题或建议，请在 [GitHub Issues](https://github.com/your-username/vue-flow-editor/issues) 中提交。
- **作者**：[@Brain](https://gitee.com/codingtodie)

## 更新日志

- **2025-07-10**：初始化项目，添加基础布局和流程图组件。

---