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

【问题标题】：How to get started with the @jsplumb/browser-ui in the Vuejs/Nuxtjs application?如何开始使用 Vuejs/Nuxtjs 应用程序中的 @jsplumb/browser-ui？
【发布时间】：2021-12-17 16:41:30
【问题描述】：

我正在尝试将@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 的完整示例

【问题讨论】：

由于我们在现代浏览器环境中，我建议只导入并使用插件或本地动态导入：stackoverflow.com/a/67825061/8816585 最重要的是，我什至不确定你是否可以从 node_modules 制作一个脚本，但这可能不是要走的路，特别是如果你只需要在本地。
我已经删除了node.js，因为它与节点没有任何关系。
另外，不要使用 querySelectors 而是使用 $ref 和 mounted 来等待 DOM 正确挂载。如果它不起作用，您甚至可以使用$nextTick。 vuejs.org/v2/guide/…
另外，您可能会考虑从插件中注入脚本，因为它仍然是未插入 Vue 生态系统的脚本的处理方式：stackoverflow.com/a/68485267/8816585
@kissu 非常感谢您的回复。根据您的第一条评论，我能够使其工作。非常感谢。

标签： javascript vue.js nuxt.js jsplumb

【解决方案1】：

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

除了使用 $refs 进行 DOM 选择之外。

【讨论】：

【解决方案2】：

以下基于@kissu cmets 为我工作：

<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>

【讨论】：