使用Laravel Mix在VUE中使用JQuery插件

Question

在我的webpack.mix.js我有这样的事情：

// vue components
mix.js('resources/assets/js/app.js', 'public/js');

// scripts which I need
mix.scripts([
    'resources/assets/js/jquery-2.2.4.min.js',
    'resources/assets/js/bootstrap.min.js',
    'resources/assets/js/fastclick.js',
    'resources/assets/js/toastr.min.js',
    'resources/assets/js/select2.min.js',
    ...
], 'public/assets/js/scripts.js');

// styles which I need
mix.styles([
    "resources/assets/css/bootstrap-colorpicker.min.css",
    "resources/assets/css/bootstrap-select.min.css",
    "resources/assets/css/bootstrap.min.css",
    "resources/assets/css/select2.min.css",
    ...
], 'public/assets/css/styles.css');

我可以初始化，例如，在我的vue组件之外的select2。

但是当我尝试使用这个插件（或我的mix.scripts块的任何脚本）时，我得到了下一个错误：

$(...).select2 is not a function

Okey，我搜索了一下，我找到了一个＆＃34;解决方案＆＃34;，在我的vue组件的export default{}之前，我需要select2脚本：

 ...

import Vue from 'vue';

require('../select2.min.js');

export default{

...

现在它可以在我的vue组件的内部和外部工作：但是我＆＃34; import＆＃34;我的select2插件两次：

1. 在我的public/assets/js/scripts.js内（我需要，因为我使用select2和其他没有vue组件的插件）
2. 在我的resources/assets/js/app.js内（当我运行npm run watch或npm run production时，编译器会将我的vue组件的要求添加到此脚本文件中）

所以，我的问题是：如何在VUE中创建我的组件使用来自我的public/assets/js/scripts.js文件的JQuery脚本，而不是在每个vue组件中都需要它们？

我希望有办法做到这一点

Answer 1

据我所知，Laravel混合的默认webpack.config.js包括JQuery。所以我评论了webpack.config.js的下一行（271）：

/*
new webpack.ProvidePlugin(Mix.autoload || {
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
}),
*/

现在当我展示JQuery console.info($());的内容时，我看到了所有的插件。

但我认为这有点脏。

有任何官方方式可以做到吗？