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

史蒂夫

我正在尝试在我的项目中添加 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。

吻你

我不建议将 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
  },
}

然后,您可以像这样在 amethod或类似中使用它

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章