Tutorial zur Verwendung von jQuery in Vue

本文主要和大家分享Vue 中使用 jQuery的方法教程，编译报错：
$ is undefined or no-undef '$' is not defined
，
假设你已经使用vue-cli搭建好了开发的脚手架，接下来如下：

Nach dem Login kopieren

Installieren Sie jQuery und führen Sie den folgenden Code im Projektstammverzeichnis aus

npm install jquery --save

Webpack-Konfiguration

Suchen Sie die Datei webpack.base.conf.js im Build-Verzeichnis im Projektstammverzeichnis und verwenden Sie den folgenden Code, um Webpack am Anfang einzuführen, da auf diese Datei standardmäßig nicht verwiesen wird

var webpack = require('webpack')

Dann fügen Sie im Modul einen Code hinzu

// 原有代码resolve: {
  extensions: ['.js', '.vue', '.json'],  alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')
  }
},// 添加代码plugins: [
  new webpack.ProvidePlugin({$: "jquery",
jQuery: "jquery",
jquery: "jquery","window.jQuery": "jquery"
  })
],// 原有代码module: {
  rules: [// ......
  ]
}

. Dann sagen viele andere Lösungen, dass der Import in main.js ausreicht, aber der Fragesteller hat dies getan. Importieren Sie jQuery in main.js:

import 'jquery'

Verwenden Sie $ oder jQuery in der Vue-Komponente, um den Code für den Betrieb des Doms zu schreiben. Dann starten Sie das Projekt:

npm run dev

Aber der Kompilierungsfehler wird gemeldet:

http://eslint.org/docs/rules/no-undef '$' is not defined orhttp://eslint.org/docs/rules/no-undef 'jQuery' is not defined

Was ist los? ? ?

eslint-Prüfung

Kluge Freunde haben bestimmt gedacht, dass es mit eslint zusammenhängt. Ja, der nächste Schritt, den Sie zu diesem Zeitpunkt ausführen müssen, besteht darin, die Datei .eslintrc.js im Stammverzeichnis zu ändern Fügen Sie nach dem Ändern der Datei in module.exports einfach ein Schlüssel-Wert-Paar jquery: true zu env hinzu, das heißt:

env: {  // 原有
  browser: true,  // 添加
  jquery: true}

npm run dev erneut, OK, es wird kein Fehler gemeldet, beeilen Sie sich und probieren Sie es in der Komponente console.log($('selector')) aus. Sie werden feststellen, dass Sie jQuery erfolgreich zum Abrufen des DOM verwendet haben.

Verwandte Empfehlungen:

Detaillierte Erläuterung der drei Schreibformen von Vue-Komponenten

Detaillierte Erläuterung der Vue-Methode zum Hinzufügen von Vux-Code

TypeScript-Verbesserungen in Vue 2.5

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von jQuery in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!