如何在 Nuxt.js 中使用 JQuery答案

【问题标题】：How to use JQuery in Nuxt.js如何在 Nuxt.js 中使用 JQuery
【发布时间】：2021-05-30 21:59:57
【问题描述】：

我想在我的组件中的函数 computed() 中使用 JQuery：

computed: {
    bgStyle() {
        var $bg_wr = $('.bg-wr'),
    }
}

为此，我在 nuxt.config.js 中尝试连接 JQuery：

head: {
   script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' },
    ]
}

但它不起作用。我收到错误“$ 未定义”。我做错了什么？

【问题讨论】：

不用担心。此外，除非绝对必要，否则将 jQuery 与 Vue/Nuxt 一起使用通常没有必要/有帮助/很好。例如，如果您需要使用一些现有的库
@shob 是的，我同意你的观点，但我使用滑块 :(
您在非 jquery 环境中有很多滑块。这里有一些：github.com/vuejs/awesome-vue#slider 这些都是独立的，我什至不会谈论有一些支持的 CSS 框架，比如 Boostrap、Buefy、Vuetify 等等……放弃 jQuery 并使用一些 JS/Vue 的。 :)

【解决方案1】：

如上所述，您不应将 jQuery 与 Vue/Nuxt 一起使用，因为它违背了拥有声明性框架与使用命令式库 (jQuery) 的全部目的。

如果没有 jQuery，生态系统会变得更大，并且更易于维护/更灵活。

如果你真的想使用 jQuery，你可以按照这样的教程进行操作：https://kaloraat.com/articles/how-to-use-jquery-in-nuxtjs
然后，使用你的函数变成method，但我建议不要这样做。

【讨论】：