So verwenden Sie JQuery in Vue

So verwenden Sie JQuery in Vue: Verwenden Sie zuerst NPM, um JQuery zu installieren, und führen Sie dann den entsprechenden Code im Projektstammverzeichnis aus. Der Code lautet [var webpack = require('webpack')].

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9.6&&jquery3.2.1-Version, DELL G3-Computer.

【Empfohlene verwandte Artikel: vue.js】

So verwenden Sie jquery in vue:

1. Installieren Sie jQuery mit NPM und führen Sie den folgenden Code im Projektstammverzeichnis aus

npm install jquery --save

2 .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 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$ or jQuery写了操作dom的代码

接着启动项目

npm run dev

但是编译却报错了：

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

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

咋回事呢？？？

3.eslint 检查

机智的朋友肯定想到跟eslint有关，没错，这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了，在改文件的module.exports中，为env添加一个键值对 jquery: true 就可以了，也就是：

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

再次 npm run dev

Starten Sie dann das Projekt

rrreee

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 'jQuery' ist nicht definiert Was ist los mit Wolltuch? ? ?

🎜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 Modul der Datei.exports, fügen Sie einfach ein Schlüssel-Wert-Paar jquery: true für env hinzu, das heißt: 🎜rrreee🎜 npm run dev erneut, OK, kein Fehler Wird gemeldet, gehen Sie schnell zur Komponente. Probieren Sie es aus, console.log($('selector')), Sie werden feststellen, dass Sie jQuery erfolgreich zum Abrufen des DOM verwenden können. 🎜🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜🎜🎜Javascript🎜🎜🎜(Video)🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!