如何将 jQuery 安装到 Nuxt.js 中？

Posted 2023-02-22

【中文标题】如何将 jQuery 安装到 Nuxt.js 中？

【英文标题】：How to install jQuery into Nuxt.js?

【发布时间】：2021-09-25 13:05:30

【问题描述】：

我正在尝试在我的项目中添加 jQuery，尽管我收到一个错误，即它没有定义

  plugins: [
     src: '~/plugins/js/svgSprite.js', mode: 'client' ,
     src: '~/plugins/vendor/jquery/jquery.min.js', mode: 'client' ,
     src: '~/plugins/vendor/bootstrap/js/bootstrap.bundle.min.js', mode: 'client' ,
     src: '~/plugins/vendor/bootstrap-select/js/bootstrap-select.min.js', mode: 'client' , <-- gives me error
     src: '~/plugins/vendor/magnific-popup/jquery.magnific-popup.min.js', mode: 'client' ,
     src: '~/plugins/vendor/smooth-scroll/smooth-scroll.polyfills.min.js', mode: 'client' ,
     src: '~/plugins/vendor/object-fit-images/ofi.min.js', mode: 'client' ,
     src: '~/plugins/js/theme.js', mode: 'client' 
  ],

为什么会这样，我明明是在 bootstrap-select 之前声明了 jQuery。

【问题讨论】：

首选使用 NPM，以更好地处理包的版本控制。也更不容易出错。

【参考方案1】：

我不建议将 jQuery 添加到 Nuxt 项目中。

---

但如果您真的想要，您可以按照以下步骤操作：

用yarn add jquery安装它 将这些添加到您的 nuxt.config.js 文件中

import webpack from 'webpack'

export default 
  // ...
  build: 
    plugins: [
      new webpack.ProvidePlugin(
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      )
    ]
  ,

确保您的.eslintrc.js 文件中包含以下内容

module.exports = 
  // ...
  env: 
    // ...
    commonjs: true,
    jquery: true
  ,

然后，你可以像这样在method 或类似的地方使用它

$("h2").addClass("tasty-class")

【讨论】：

使用 plugins 属性确实会由于某种原因破坏一切并产生更多问题，我将坚持在全局元标记中声明脚本，这实际上使其工作。