如何开始使用Vuejs/Nuxtjs应用程序中的@jplumb/Browser-UI？

How to get started with the @jsplumb/browser-ui in the Vuejs/Nuxtjs application?(如何开始使用Vuejs/Nuxtjs应用程序中的@jplumb/Browser-UI？)

问题描述

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

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

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

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'
      }
    ]

3. 我有如下代码：

<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

推荐答案

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

在使用$refs进行DOM选择的基础上。

这篇关于如何开始使用Vuejs/Nuxtjs应用程序中的@jplumb/Browser-UI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！