在 nuxt.js 视图中使用 jquery [英] using jquery in nuxt.js view

问题描述

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

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

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

vendor: ['jquery', 'bootstrap'],插件: [新的 webpack.ProvidePlugin({$:'jquery'})],

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

<块引用>

$"未定义

然后当我尝试通过 require $ from 'jquery'当我尝试使用 $ 时，我得到了 undefined.

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

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

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

如前所述，根据我是否需要，它会给我不同的未定义错误.

如何让它识别$?

解决方案

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

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

<块引用>

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

希望你的问题能解决.

看图:

您可以从这里

下载 JQuery

I'm trying out nuxt.js for the first time. But I can't get JQuery to work.

I've installed the npm package alongside with bootstrap.js and popper.js.

Also added this to the nuxt.config.js:

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

But when I try to use it in the view it doesn't work. First I get:

"$" is not defined

Then when I try to require it by require $ from 'jquery' I get undefined when I try to use $.

I'm programming .Net usually so this is not my strongest part.

I'm trying to use $ like so:

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

As said it gives me different undefined errors depending if I require it or not.

How can I make it recognize the $?

解决方案

I think jquery can be used everywhere in the project. so global declaration will be best case. you can simply add JQuery in your project ,

1. keep your JQuery.js into static folder
2. just add piece of code into Nuxt.config.js file like below:

script: [{src: 'jquery-3.3.1.min.js'}]

hope your problem will solve.

see the image:

you can download JQuery from here

这篇关于在 nuxt.js 视图中使用 jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！