带有 vue.js 的 jquery-nice-select 不是函数答案

【问题标题】：jquery-nice-select with vue.js is not a function带有 vue.js 的 jquery-nice-select 不是函数
【发布时间】：2018-03-13 11:24:36
【问题描述】：

我使用这个库：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 警告]：挂载钩子错误：“TypeError: $(...).niceSelect 不是函数”

还有这个：

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();
            }
        }
    }
}

【问题讨论】：

如何加载插件？
是的，使用require("jquery-nice-select")加载插件
这不是你加载插件的方式。您是否尝试按照说明进行操作？ github.com/hernansartorio/jquery-nice-select#usage
这个插件通过Webpack打包所有厂商的js库，然后加载所有的js库。我不遵循说明，因为 niceSelect 从 NPM 存储库安装，但实际上这是相同的方式。如果你看到错误，它写在那里“niceSelect is not a function”，而不是“niceSelect is not defined”
尝试在 JavaScript 控制台中输入：({}).f(); 错误说明了什么？

标签： javascript webpack jquery-plugins vue.js

【解决方案1】：

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

我可以说我有同样的错误niceSelect is not a function（使用 Yii2 框架，但没有必要），原因是两次包含 jQuery，结果页面源（在浏览器中）是这样的：

CSS
jquery.js
nice-select.js
niceSelect 初始化函数
主要文档内容
另一个 jquery.js

我刚刚修改了代码以使最后一个项目消失，它可以工作。

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

【讨论】：

【解决方案2】：

是的，我有一些 jQuery 的链接。我留下了一个，它起作用了！

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

require('jquery-nice-select');

或

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

我使用了没有任何框架的 Webpack

【讨论】：