So verwenden Sie jq in vue.js

So verwenden Sie jq mit vue.js: Installieren Sie zuerst jQuery über NPM, der Code lautet [npm install jquery --save], dann konfigurieren Sie Webpack, der Code lautet [var webpack = require('webpack')]; eslint.

【Empfohlene verwandte Artikel: vue.js】

vue.js So verwenden Sie jq:

1. NPM installiert jQuery, 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 zu Beginn den folgenden Code, um Webpack einzuführen, denn Auf diese Datei wird standardmäßig nicht verwiesen. webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用。

var webpack = require('webpack')

然后在module.exports中添加一段代码，

// 原有代码
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: [
// ......
 ]
}

然后许多其他解决办法到此就说在main.js里导入就可以了，然而题主照着做了。

main.js里导入jQuery

import 'jquery'

在Vue组件里使用 $ 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
}

Dann fügen Sie ein Stück Code in module.exports hinzu,

rrreee

Dann sagen viele andere Lösungen einfach, es in main.js zu importieren, aber der Fragesteller folgte diesem Beispiel.

JQuery in main.js importierenrrreeeVerwenden Sie $ oder jQuery in der Vue-Komponente, um den Code für den Betrieb des Doms zu schreibenStarten Sie dann das ProjektrrreeeAber bei der Kompilierung wurde ein Fehler gemeldet: http: //eslint.org/docs/rules/no-undef '$' ist nicht definiert oder

http://eslint.org/docs/rules/no-undef 'jQuery' ist nicht definiert🎜🎜Was ist geht es weiter? ? ? 3. Eslint-Überprüfung Fügen Sie im Stammverzeichnis der geänderten Datei ein Schlüssel-Wert-Paar jquery: true für env hinzu, das heißt: 🎜rrreee🎜 npm run dev erneut, OK, kein Fehler, 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 jq in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!