如何在Vue.js/Nuxt.js应用中集成@jsplumb/browser-ui？

首先纠正你现有配置的两处问题：

1. 无需在nuxt.config.js的script配置中手动引入node_modules下的umd文件，npm安装的依赖可直接在组件内按需导入
2. 你当前将jsPlumb实例初始化放在了脚本顶级作用域，此时组件DOM还未渲染，无法获取到#diagram元素，会导致实例初始化失败

正确接入步骤 #

步骤1：保留安装操作 #

你之前执行的npm install @jsplumb/browser-ui --save无需改动。

步骤2：移除无效配置 #

删除nuxt.config.js中script数组里添加的两个jsplumb相关配置项。

步骤3：修改组件代码 #

实例初始化逻辑要放在mounted生命周期中执行，保证DOM已经渲染完成，正确代码如下：

<template>
  <div class="row">
    <div class="col-md-12">
      <div id="diagram" style="position: relative;width: 100%;height: 600px;border: 1px solid #eee;">
        <!-- 示例节点1 -->
        <div id="node1" style="position:absolute;left: 100px;top: 100px;width: 100px;height: 50px;background: #409eff;line-height: 50px;text-align: center;color: #fff;">节点1</div>
        <!-- 示例节点2 -->
        <div id="node2" style="position:absolute;left: 300px;top: 200px;width: 100px;height: 50px;background: #67c23a;line-height: 50px;text-align: center;color: #fff;">节点2</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    // 仅客户端侧执行逻辑
    if (process.browser) {
      // 导入依赖
      const jsPlumbBrowserUI = require('@jsplumb/browser-ui')
      // 初始化实例，此时#diagram元素已经渲染完成
      const plumbIns = jsPlumbBrowserUI.newInstance({
        container: document.getElementById('diagram')
      })
      // 给两个节点添加可拖拽能力
      plumbIns.draggable(['node1', 'node2'])
      // 连接两个节点
      plumbIns.connect({
        source: 'node1',
        target: 'node2',
        // 可选配置连接线样式
        endpoint: 'Dot',
        paintStyle: { stroke: '#909399', strokeWidth: 2 },
        connector: ['Bezier', { curviness: 50 }]
      })
      // 可将实例挂载到this上方便其他生命周期调用
      this.plumbIns = plumbIns
    }
  },
  // 组件销毁时销毁实例，避免内存泄漏
  beforeDestroy() {
    if (process.browser && this.plumbIns) {
      this.plumbIns.destroy()
    }
  }
}
</script>

后续开发说明 #

完成上述配置后，你可以直接调用jsPlumb实例的各类API完成节点添加、连线配置、事件监听等操作，所有社区版原生API都可直接使用，无需额外适配。

内容的提问来源于stack exchange，提问作者BATMAN_2008