在 nuxt.js 中使用 jquery.easing 时“$.extend 不是函数”答案

【问题标题】："$.extend is not a function" while using jquery.easing in nuxt.js在 nuxt.js 中使用 jquery.easing 时“$.extend 不是函数”
【发布时间】：2019-07-15 02:52:12
【问题描述】：

我在 Vue.js 中创建了一个应用程序，我正在尝试在 Nuxt.js 中进行调整。对于滚动间谍，我在 Vue.js 中使用了 jquery.easing，所以我想在 Nuxt.js 中做同样的事情。

有点像你在Vue.js main.js文件中导入jQuery，我在Nuxt中创建了一个插件来添加jQuery和require("jquery.easing")：

plugin/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 vue.js nuxt.js jquery-easing

【解决方案1】：

如果您使用的是 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'
  }     
]

【讨论】：

【解决方案2】：

J-query 和 Nuxt.js 不是最好的朋友。

我使用了一个名为 vuetifyjs 的插件。您将找到一个滚动 goTo 函数，您可以在其中修复选项，包括平滑滚动（使用内置缓动函数）、持续时间和偏移量。

这是文档的链接： https://next.vuetifyjs.com/en/framework/scroll

【讨论】：