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

 

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', { 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>————————————————版權聲明：本文為CSDN博主「瘋狂一世。」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/qq_41950229/article/details/103381951