我在vue.js中制作了一个应用程序,我试图在nuxt.js中进行调整。对于卷轴,我在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的扩展版
- 添加jQuery UI:
"jquery-ui": "^1.12.1"
, - 仅在
nuxt.config.js
文件中使用CDN和脚本 - 使用旧版本的jQuery和
jQuery.easing
我在做什么错,如何在vue.js中起作用?
如果使用jQuery-简单的方法就是这样添加:
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