Vue cli3使用jQuery控件

背景介绍

由于历史遗留问题需要使用之前基于jQuery的代码，其中还用到了一个基于jQuery的多选控件，环境是vue cli3

导入并配置jQuery

首先通过npm导入jQuery

npm install –save jquery

修改package.json同级的vue.config.js文件(如果没有，则自己新建一个)

const webpack = require("webpack");
module.exports = {
// 调整 webpack 配置最简单的方式就是在 vue.config.js中的configureWebpack选项提供一个对象
//webpack ProvidePlugin创建一个全局变量，在webpack各个模块内都可以使用。
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',         // 创建 '$'、'jQuery'、'window.jQuery' 三个变量指向依赖jquery
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

Plan A(控件提供了npm包)

通过npm导入控件

npm install –save multiselect

这里我要说一句，一开始我也以为我要用的这个控件没有npm包，在浏览其github的issue的时候发现有人正好提这个需求，然后下面人已经在npm上找到了，所以有些控件使用问题先到issue里搜搜，很有可能已经有别人帮你探过路了

在用到jQuery和jQuery控件的地方引入

import $ from 'jquery';
require('multiselect')

Plan B(控件没有提供npm包)

控件可能年代久远，没有提供npm包，这时我们可以将下载下来的js(我这里是jquery.multi-select.js)放入"根目录/src/asset/jquery-multi-select"目录下
然后在页面用到jQuery和jQuery控件的地方引入

import $ from 'jquery';
import multiSelect from '@/asset/jquery-multi-select/jquery.multi-select'

使用

$('#resList').multiSelect({
    selectableHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>未关联</div>",
    selectionHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>已关联</div>"
});
$('#resList').multiSelect('select', selectedList);