将 Jsplumb 与 vuejs 集成答案

【问题标题】：Integrating Jsplumb with vuejs将 Jsplumb 与 vuejs 集成
【发布时间】：2017-10-25 15:16:25
【问题描述】：

我正在尝试做一个使用 jsplumb 连接两个 div 的简单示例。因此，我将 jsplumb 与 Vuejs 集成并尝试了一个示例。我做了 npm install jsplumb。然后像这样使用：

<div>
    <div id="diagramContainer">
        <div id="item_left" class="item"></div>
        <div id="item_right" class="item" style="margin-left:50px;"></div>
    </div>
</div>
</template>   
<script>
import jsplumb from 'jsplumb'
        jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"item_left",
                target:"item_right",
                endpoint:"Rectangle"
            })
        })
</script> 
<style>
        #diagramContainer {
            padding: 20px;
            width:80%; height: 200px;
            border: 1px solid gray;
        }

        .item {
            height:80px; width: 80px;
            border: 1px solid blue;
            float: left;
        }
</style>

但现在我收到这样的错误：

20:2-16 "export 'default' (imported as '__vue_script__') was not found in '!!babel-loader!../../node_modules/vue-loader/lib/selector?type=script&index=0&bustCache!./jsplumb.vue'

我不知道该怎么做。请帮帮我。

【问题讨论】：

标签： vuejs2 jsplumb

【解决方案1】：

我会尝试将您的导入更改为：

import jsplumb from 'jsPlumb'

然后按如下方式使用：

jsplumb.jsPlumb.ready(...)

【讨论】：