[英]"$.extend is not a function" while using jquery.easing in nuxt.js
I made an app in Vue.js that I'm trying to adapt in Nuxt.js.我在 Vue.js 中制作了一个应用程序,我正在尝试在 Nuxt.js 中进行调整。 For the scrollspy I used
jquery.easing
in Vue.js so I wanted to do the same in Nuxt.js.对于 scrollspy,我在 Vue.js 中使用了
jquery.easing
,所以我想在 Nuxt.js 中做同样的事情。
A little like you import jQuery in Vue.js main.js
file, I created a plugin in Nuxt to add jQuery and require("jquery.easing")
:有点像你在 Vue.js
main.js
文件中导入 jQuery,我在 Nuxt 中创建了一个插件来添加 jQuery 和require("jquery.easing")
:
plugin/jqueryeasing.js插件/jqueryeasing.js
import Vue from "vue";
import jquery from "jquery";
require("jquery.easing");
Vue.prototype.jquery = jquery;
I also linked it to my nuxt.config.js
file:我还将它链接到我的
nuxt.config.js
文件:
const webpack = require("webpack");
module.exports = {
/*
** Headers of the page
*/
head: {
title: "resume",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "undermaintenance" }
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
css: [
// this line include bootstrap.css in each html file on generate
"~/node_modules/bootstrap/dist/css/bootstrap.css",
// main css file in document
"assets/css/main.css"
],
/*
** Plugin section
*/
plugins: [
"~plugins/bootstrap.js"
"~plugins/jqueryeasing.js",
],
/*
** Build configuration
*/
build: {
/**
* add external plugins
*/
vendor: ["jquery", "bootstrap"],
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
],
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
});
}
}
}
};
jQuery is working like a charm with my Bootstrap. jQuery 与我的 Bootstrap 一起工作就像一个魅力。
I don't know why but I'm having this我不知道为什么,但我有这个
typeError: $.extend is not a function.
typeError: $.extend 不是函数。
It comes from my node_modules/jquery.easing/jquery.easing.js
file.它来自我的
node_modules/jquery.easing/jquery.easing.js
文件。
$.extend($.easing, {
def: "easeOutQuad",
swing: function(x) {
return $.easing[$.easing.def](x);
},
easeInQuad: function(x) {
Version information:版本信息:
"jquery": "^3.3.1",
"jquery.easing": "^1.4.1"
I've tried to:我试过:
"jquery-ui": "^1.12.1"
,"jquery-ui": "^1.12.1"
,nuxt.config.js
file onlynuxt.config.js
文件中使用 CDN 和脚本jQuery.easing
jQuery.easing
What am I doing wrong and how come it works in Vue.js?我做错了什么,它如何在 Vue.js 中工作?
If you are using Jquery-easing the simple way is to add it like this :如果您使用的是 Jquery-easing,简单的方法是像这样添加它:
1- Inside your nuxt.config.js
script: [
{
src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'
}
]
J-query and Nuxt.js are not best friends. J-query 和 Nuxt.js 不是最好的朋友。
I used a plugin called vuetifyjs.我使用了一个名为 vuetifyjs 的插件。 You will find a scroll
goTo
function where you can fix options including smooth scrolling (using built-in easing functions), duration and offset.您将找到一个滚动
goTo
功能,您可以在其中修复包括平滑滚动(使用内置缓动功能)、持续时间和偏移在内的选项。
This is the link to the documentation: https://next.vuetifyjs.com/en/framework/scroll这是文档的链接: https : //next.vuetifyjs.com/en/framework/scroll
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.