javascript - 如何将 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")
推荐阅读
- c - 在实现 _BV() 宏时减少代码重复
- apache-spark - 仅对 group by 中的不同值求和
- python - 溢出错误:使用 cv2.line() 时 Python int 太大而无法转换为 C long
- python - 保存后在脚本中从头开始加载tensorflow keras顺序模型的问题没有任何问题
- javascript - 如何将字符串添加到数组的键并获取值
- postgresql - 通过内存增加或查询重写来提高查询速度
- python - 如何在烧瓶中接受空 url 路由?
- typescript - 环回记录器 4
- python - 有没有办法使用 map 函数或 for 循环来融化?我需要用相同的代码行融化 5 个数据帧
- c# - 如何知道是否在应用程序 C# 中创建了任何表单?