将Jsplumb与vuejs集成

Question

我试图做一个使用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'

我不知道如何继续前进。请帮我。

Answer 1

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

import jsplumb from 'jsPlumb'

然后按如下方式使用：

jsplumb.jsPlumb.ready(...)