欢迎光临
我们一直在努力

在umi Max中从零搭建AntV X6 DAG图编辑器

一、 环境准备与项目初始化

1.首先,确保本地已安装 Node.js(建议 v18 或 v20+)和 pnpm。

版本查询指令:node -v

                         pnpm -v

2.我们在目标目录下使用官方脚手架创建 Umi Max 项目(这里选择了 Ant Design Pro 模板):

pnpm dlx create-umi@latest

Pick Umi App Template →Ant Design Pro

Pick Npm Client →  pnpm

Pick Npm Registry → taobao

⚠️项目文件名最好不要含有中文,Umi 底层使用的打包工具(如 esbuild、swc 等)由 Rust/Go 编写,对中文路径的字符边界解析存在兼容性问题,使用中文会报错Rust编译问题。

⚠️项目文件夹移动位置后,需要删除node_modules文件,重新执行

pnpm install

二、 集成AntV X6 与 DAG 编辑器实现

1.安装依赖:

pnpm add @antv/x6 @antv/x6-react-shape

2.新建组件文件 index.tsx

  • 引入核心依赖

import '@antv/x6-react-shape';

  • 初始化画布Graph
  • 定义节点和边
赞(0)
未经允许不得转载:171主机测评 » 在umi Max中从零搭建AntV X6 DAG图编辑器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址