Laravel - 如何将 jQuery 插件添加到 .vue 视图？答案

【问题标题】：Laravel - How to add jQuery plugin to .vue view?Laravel - 如何将 jQuery 插件添加到 .vue 视图？
【发布时间】：2021-07-03 06:27:30
【问题描述】：

我需要在 Laravel 项目的 Vue.js 视图中添加 jQuery 插件 scrollify，怎么做？

我确实导入了 master.blade.php

<script src="{{asset('js/libs/jquery.scrollify.js')}}"></script>

现在我想在我的 vue.js 主页中使用它

import $ from 'jquery'
    export default {
        data() {
            return {
            }
        },
        mounted() {
            $(function() {
                $.scrollify({
                    section : ".section",
            });
        });
        },

        methods: {

        }
    }
</script>

它给我带来了错误

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default.a.scrollify is not a function

是否有一些干净的方法可以在 Laravel 项目中导入 jQuery 插件以在 Vue.js 中使用它？感谢您的建议！

【问题讨论】：

请不要劫持滚动行为。
@tauzN 好的，但我还是想知道如何在 Laravel 中导入 jQuery 插件...

标签： jquery laravel vue.js webpack plugins

【解决方案1】：

你应该通过 npm 安装 jquery 和 scrollify 插件作为模块：

npm i jquery --save 
npm i jquery-scrollify --save

然后导入你的 vue 文件：

import $ from 'jquery'

$.scrollify({
    section : ".example-classname",
});

你不需要输入

$(函数() {})

只需将代码直接放入挂载函数中即可：

  mounted() {
                $.scrollify({section : ".section",});
        }

【讨论】：