在 nuxt.js 视图中使用 jquery

Question

我是第一次尝试nuxt.js。 但我无法让JQuery工作。

我已经安装了npm包以及bootstrap.js和popper.js 。

还将其添加到nuxt.config.js ：

vendor: ['jquery', 'bootstrap'],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ],

但是当我尝试在视图中使用它时它不起作用。 首先我得到：

“$”未定义

然后，当我尝试通过require $ from 'jquery'来要求它时，当我尝试使用$时，我得到了 undefined 。

我通常在编程.Net，所以这不是我最擅长的部分。

我正在尝试使用$像这样：

$.each(this.imageList, function(key, image) {
    formData.append(`images[${key}]`, image)
  })

如前所述，它给了我不同的未定义错误，具体取决于我是否需要它。

我怎样才能让它识别$ ？

Answer 1

我认为jquery可以在项目的任何地方使用。 所以全局声明将是最好的情况。 你可以简单地在你的项目中添加 JQuery ，

1. 将您的 JQuery.js 保存到静态文件夹中
2. 只需将一段代码添加到 Nuxt.config.js 文件中，如下所示：

脚本：[{src：'jquery-3.3.1.min.js'}]

希望你的问题能解决。

看图片：

你可以从这里下载 JQuery