vue.js unterstützt JQuery. So verwenden Sie jquery in vue: Verwenden Sie zuerst „npm install jquery --save“, um dann das Webpack zu konfigurieren und jquery in main.js zu importieren.
Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.
Angenommen, Sie haben vue-cli bereits zum Aufbau des Entwicklungsgerüsts verwendet, schauen Sie sich als Nächstes Folgendes an.
1. NPM installiert jQuery, führt den folgenden Code im Projektstammverzeichnis aus
npm install jquery --save
2. Webpack-Konfiguration
Suchen Sie die Datei webpack.base.conf.js im Build-Verzeichnis unter dem Projektstammverzeichnis und verwenden Sie Folgendes Code am Anfang, um webpack einzuführen, da auf die Datei standardmäßig nicht verwiesen wird.
var webpack = require('webpack')Dann fügen Sie ein Stück Code in module.exports 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 einfach, es in main.js zu importieren, aber der Fragesteller folgte diesem Beispiel.
JQuery in main.js importieren
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 bei der Kompilierung wurde ein Fehler gemeldet:
http://eslint.org/docs/rules/no-undef '$' ist nicht definiert oderhttp://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined
http://eslint.org/docs/rules/no-undef 'jQuery' ist nicht definiert Code>
Was ist los? ? ?
3. Eslint-Check
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. Exporte der geänderten Datei. Fügen Sie einfach ein Schlüssel-Wert-Paar jquery: true zu env hinzu, das heißt:
env: { // 原有
browser: true, // 添加
jquery: true}npm führen Sie dev erneut aus, OK, es wurde kein Fehler gemeldet, beeilen Sie sich und versuchen Sie es in der Komponente console.log($ ('selector')) werden Sie feststellen, dass Sie jQuery erfolgreich zum Abrufen des DOM verwendet haben.
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Videokurse zum Programmieren! !
Das obige ist der detaillierte Inhalt vonUnterstützt vue.js Jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
