Vue3 + antV X6 实现类似思维导图功能

发布网友 发布时间：2024-09-27 17:30

我来回答

共1个回答

热心网友 时间：2天前

实现类似思维导图功能的项目已经上线，解决需求过程中的技术难点及代码解析如下：

调研阶段，选择三个插件，首先考虑 vue-x6-flow，但因其为二次封装，无法满足全部需求。转而研究 antV X6，最终决定使用。尽管 antV X6 的示例代码使用 TypeScript（TS），对初学者友好程度较低。在尝试后，决定采用 D3JS，但文档体验不佳，未找到符合需求的示例。

经过综合比较，最终选择了 antV X6，考虑到 Vue3 支持 TS，但项目首次使用 Vue3 开发，故决定暂时不引入 TS，以降低项目风险。

在确定第三方插件后，开始面对安装依赖问题。使用 cnpm 安装时，遇到响应 404 的问题；使用 npm 安装时，出现卡顿。最终使用 npm 解决安装问题。

完成依赖安装后，复制示例代码并稍作调整。在参照官网示例的基础上，发现报错 “TypeError: Cannot read properties of undefined”。解决方案是将 x6-vue-shape 依赖指向正确的路径。接着出现 “TypeError: Class constructor Node2 cannot be invoked without 'new’” 错误，正确做法是在 vite.config.js 中添加配置别名的代码。

页面显示成功，但核心功能报错 “Component provided template option but runtime compilation is not supported in this build of Vue”。在 vite.config.js 中添加配置别名的代码后，解决此问题。

实现自定义组件，添加了 el-form、el-input 等元素，但遇到渲染问题。解决方法是在自定义组件中重新引入全局 Element 组件。

项目完成度已达到九成，剩余部分为添加各种业务需求组件。实现核心需求的关键步骤是，点击添加按钮后，将原有父节点变为子节点，以解决此类需求。

在经过一系列技术挑战后，项目进入交互设计阶段，将开始编写交互逻辑代码。对于遇到此类型需求的开发者，希望本项目能提供参考和帮助。