1.安装jQuery和jQuery-ui

npm i jquery s
npm i jquery-ui s
yarn install

2.在vue.config.js中进行配置

// webpack build externals
const prodExternals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  jquery: 'jquery',// 新添加
  $: 'jquery' // 新添加
}

3.在需要引入的组件中引入

<script>
  import jsplumb from 'jsplumb'
  import  $ from "jquery"
   // 需要注意的是，在jquery-ui引入的时候，
  // 直接写成 import juqery-ui 是没有效果的，只能直接写到具体的方法
  import 'jquery-ui/ui/widgets/draggable'
  import 'jquery-ui/ui/widgets/droppable'
  export default {
    name: 'test1',
    components: {
      jsplumb
    },

    mounted(){
      /* global jsPlumb */
      var instance = jsPlumb.getInstance({
        Container:"diagramContainer"
      });
      instance.connect({
        source: 'item_left',
        target: 'item_right',
        paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//设置连线样式
        endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },//设置连线样式
        overlays: [ ['Arrow', { width: 12, length: 12, location: 1 }] ],//设置箭头
        endpoint: 'Dot',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']

      });

      //注册实体可draggable
      $("#item_left").draggable({
        containment: "parent",
        drag: function (event, ui) {
          instance.repaintEverything();
        },
        stop: function () {
          instance.repaintEverything();
        }
      });
      $("#item_right").draggable({
        containment: "window",
        drag: function (event, ui) {
          instance.repaintEverything();
        },
        stop: function () {
          instance.repaintEverything();
        }
      });
    }
  }
</script>