在Ant-design-pro框架中引入jQuery和jQuery-ui步骤

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', {  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>

2.在vue.config.js中进行配置
// webpack build externalsconst 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', { 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>————————————————版权声明：本文为CSDN博主「疯狂一世。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_41950229/article/details/103381951