如何开始使用Vuejs/Nuxtjs应用程序中的@jsplumb/browser-ui？
如何开始使用Vuejs/Nuxtjs应用程序中的@jsplumb/browser-ui？
提问于 2021-11-03 09:33:08
我正在尝试将@jsplumb/browser-ui社区版本集成到我的应用程序中。根据团队，我正在使用@jsplumb/browser-ui，但我不知道如何开始将它集成到我的Vue/Nuxtjs application中。
以下是我要采取的步骤：
- 使用
@jsplumb/browser-ui安装npm install @jsplumb/browser-ui --save。 - 将库包含在
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>我不明白如何将它集成到我的应用程序中。文档没有提供关于Vue/Nuxtjs的完整示例。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-03 10:14:19
Stack Overflow用户
发布于 2021-11-03 10:04:29
以下是基于@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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69822526
复制相关文章
相似问题
腾讯云开发者
