«$ .extend не является функцией» при использовании jquery.easing в nuxt.js - PullRequest
Новая
       38

«$ .extend не является функцией» при использовании jquery.easing в nuxt.js

0 голосов
/ 21 февраля 2019

Я создал приложение в Vue.js, которое я пытаюсь адаптировать в Nuxt.js.Для scrollspy я использовал jquery.easing в Vue.js, поэтому я хотел сделать то же самое в Nuxt.js.

. Немного похоже на импорт jQuery в файл Vue.js main.js, я создал плагин вНужно добавить 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: "jquery-ui": "^1.12.1",
  • Использовать CDN и сценарий только в nuxt.config.js файле
  • Использовать старую версиюjQuery и jQuery.easing

Что я делаю не так и как это работает в Vue.js?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

J-query и Nuxt.js не лучшие друзья.

Я использовал плагин vuetifyjs.Вы найдете функцию прокрутки goTo, в которой вы можете исправить параметры, включая плавную прокрутку (используя встроенные функции замедления), длительность и смещение.

Это ссылка на документацию: https://next.vuetifyjs.com/en/framework/scroll

0 голосов
/ 21 февраля 2019

Если вы используете Jquery-easying, просто добавьте его так: 

 1- Inside your nuxt.config.js
  script: [
  {
    src:
  'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'
  }     
]
...