Heim > Artikel > Web-Frontend > Tutorial zur Verwendung von jQuery in Vue
本文主要和大家分享Vue 中使用 jQuery的方法教程,编译报错: $ is undefined or no-undef '$' is not defined , 假设你已经使用vue-cli搭建好了开发的脚手架,接下来如下:
npm install jquery --save
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')
// 原有代码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? ? ?
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!