如何开始使用Vuejs/Nuxtjs应用程序中的@jsplumb/browser-ui？

Question

我正在尝试将 @jsplumb/browser-ui 社区版集成到我的应用程序中。根据 recommendation from jsplumb team，我正在使用 @jsplumb/browser-ui，但我不明白如何开始将它集成到我的 Vue/Nuxtjs application。

以下是我正在执行的步骤：

使用 npm install @jsplumb/browser-ui --save 安装 @jsplumb/browser-ui。
将 nuxt-config.js 中的库作为 script 的一部分包括在内：

script: [
      {
        src:"node_modules/@jsplumb/core/js/jsplumb.core.umd.js",
        mode: 'client'
      },
      {
        src:"node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js",
        mode: 'client'
      }
    ]

我有如下代码：

<template>
  <div class="row">
    <div class="col-md-12">
      <div id="diagram" style="position: relative" />
    </div>
  </div>
</template>

<script>
if (process.browser) {
  const jsPlumbBrowserUI = require('node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js')
  const instance = jsPlumbBrowserUI.newInstance({
    container: document.getElementById('diagram')
  })
  console.log(instance)
}

export default {
  mounted () {
    if (process.browser) {
      console.log('MOUNTED BLOCK')
    }
  }
}
</script>

我不明白如何将它集成到我的应用程序中。 documentation 没有提供关于 Vue/Nuxtjs

的完整示例

Answer 1

根据@kissu 的评论，以下对我有用：

<template>
  <div class="row">
    <div class="col-md-12">
      <div id="diagram" ref="diagram" style="position: relative" />
    </div>
  </div>
</template>

<script>
export default {
  async mounted () {
    if (process.browser) {
      const jsPlumbBrowserUI = await import('@jsplumb/browser-ui')

      const instance = jsPlumbBrowserUI.newInstance({
        container: this.$refs.diagram
      })
      console.log(instance)
    }
  }
}
</script>

Answer 2

使用此中所示的动态导入并仅在浏览器上下文中导入 jsplumb 包解决了 OP 面临的问题。

除了使用 $refs 作为 DOM 选择之外。

如何开始使用Vuejs/Nuxtjs应用程序中的@jsplumb/browser-ui？

How to get started with the @jsplumb/browser-ui in the Vuejs/Nuxtjs application?

javascript

jsplumb

vue.js

nuxt.js