[英]"$.extend is not a function" while using jquery.easing in nuxt.js
我在 Vue.js 中制作了一个应用程序,我正在尝试在 Nuxt.js 中进行调整。 对于 scrollspy,我在 Vue.js 中使用了jquery.easing
,所以我想在 Nuxt.js 中做同样的事情。
有点像你在 Vue.js main.js
文件中导入 jQuery,我在 Nuxt 中创建了一个插件来添加 jQuery 和require("jquery.easing")
:
插件/jqueryeasing.js
import Vue from "vue";
import jquery from "jquery";
require("jquery.easing");
Vue.prototype.jquery = jquery;
我还将它链接到我的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 与我的 Bootstrap 一起工作就像一个魅力。
我不知道为什么,但我有这个
typeError: $.extend 不是函数。
它来自我的node_modules/jquery.easing/jquery.easing.js
文件。
$.extend($.easing, {
def: "easeOutQuad",
swing: function(x) {
return $.easing[$.easing.def](x);
},
easeInQuad: function(x) {
版本信息:
"jquery": "^3.3.1",
"jquery.easing": "^1.4.1"
我试过:
"jquery-ui": "^1.12.1"
,nuxt.config.js
文件中使用 CDN 和脚本jQuery.easing
我做错了什么,它如何在 Vue.js 中工作?
如果您使用的是 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 和 Nuxt.js 不是最好的朋友。
我使用了一个名为 vuetifyjs 的插件。 您将找到一个滚动goTo
功能,您可以在其中修复包括平滑滚动(使用内置缓动功能)、持续时间和偏移在内的选项。
这是文档的链接: https : //next.vuetifyjs.com/en/framework/scroll
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.