在Nuxt.js中安装jQuery的步骤
P粉755863750
P粉755863750 2023-11-06 16:41:50
0
1
655

尽管我在项目中尝试添加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' }, <-- 给我报错
    { 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。

P粉755863750
P粉755863750

全部回复(1)
P粉277824378

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


但是如果你真的想要添加,可以按照以下步骤进行:

  • 使用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")
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!