Question

我使用此库：https://github.com/hernansartorio/jquery-nice-select

将此插件包含在文件bootstrap.js中：

require('jquery-nice-select');

比我在申请文件app.js

中使用的要多

app.js：

require('./bootstrap');

// ... code

const app = new Vue({
    router,
    components: {
      App
    },
    template: '<app></app>',
    mounted() {
        $(document).find('select').niceSelect();
    }
}).$mount('#app');

配置构建我的项目webpack.mix.js：

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .extract(
        [
            'vue',
            'vue-resource',
            'vue-router',
            'vue-scrollto',
            'vue-meta'
        ],
        'public/js/vue.js'
    )
    .extract(
        [
            'jquery',
            'bootstrap-sass',
            'jquery-nice-select',
            'owl.carousel',
            'jquery-parallax.js',
        ],
        'public/js/vendor.js'
    )
    .autoload({
        'jquery': ['$', 'jquery', 'jQuery', 'window.jQuery'],
        'tether': ['window.Tether', 'Tether'],
    })
;

但是，当您尝试使用niceSelect插件时，会发生以下错误：

vue.js：484 [Vue warn]：挂钩错误：＆＃34; TypeError： $（...）。niceSelect不是函数＆＃34;

和此：

TypeError：$（...）。niceSelect不是函数

我不明白在哪里看，我做的不对？在我看来，这个问题只出现在给定的插件中，之前的所有插件都是连接并正常工作的。

P.S。注意，错误不是声明函数，而是声明它不是函数。是的，公众中所有JS的连接都是正常的：

<!-- code -->
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

UPD：顺便说一句，指令中出现相同的错误。

export default {
    directives: {
        niceSelect: {
            update(el) {
                const $  = window.$;
                $(el).niceSelect();
            }
        }
    }
}

Answer 1

好像您忘了用解决方案更新问题了 https://github.com/hernansartorio/jquery-nice-select/issues/60

从我自己可以说我有同样的错误niceSelect is not a function（使用Yii2 Framework，但没有必要），原因是jQuery被包含两次，导致页面源（在浏览器中）是这样的：

CSS
的jquery.js
可有可无select.js
niceSelect初始化函数
主要文件内容
另一个jquery.js

我刚刚修改了代码以使最后一项消失，并且可以正常工作。

所以我建议查看页面的结果源代码（在浏览器中）

Answer 2

是的，我有一些到jQuery的链接。我留下了一个，它奏效了！

您可以在import文件中添加require或.js

require('jquery-nice-select');

或

import 'jquery-nice-select/js/jquery.nice-select';

我在没有任何框架的情况下使用了Webpack

jquery-nice-select与vue.js不是一个函数

2 个答案: