在vue项目中使用 jquery 和 jquery UI

最近在做流程图的项目，有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一些博客和demo，决定使用 jquery UI 中的 Draggable 和 Droppable 功能。

这里面遇到的问题就是，如何在 vue 中引入 jquery UI

---

• 本地安装 jquery 和 jquery UI

npm install jquery --save
npm install jquery-ui --save

---

• 配置 webpack.base.conf.js 文件

// 在开头引入webpack，后面的plugins那里需要
const webpack = require('webpack')
// ...
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery': 'jquery',
      'jquery-ui': 'jquery-ui'
    }
  },
  // 增加一个plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],

---

• 在项目文件中，即需要引入jqueryUI的的地方import文件

---

• 这里面有个坑是，因为jqueryUI中的resizable()方法需要引入jqueryUI的css文件，所以需要在根目录的index.html中引入该文件

    
    
    
    // 此处引入了jquery UI的css文件