Comment utiliser jquery dans vue

Comment utiliser jquery dans vue : utilisez d'abord NPM pour installer jQuery et exécutez le code approprié dans le répertoire racine du projet ; puis configurez webpack, le code est [var webpack = require('webpack')].

L'environnement d'exploitation de ce tutoriel : système Windows7, version Vue2.9.6&&jquery3.2.1, ordinateur DELL G3.

[Articles connexes recommandés : vue.js]

Comment utiliser jquery dans vue :

1. Installez jQuery avec NPM et exécutez le code suivant dans le répertoire racine du projet

npm install jquery --save

2 Configuration du Webpack

dans le répertoire build dans le. répertoire racine du projet Recherchez le fichier webpack.base.conf.js et utilisez le code suivant au début pour introduire webpack car ce fichier n'est pas référencé par défaut.

var webpack = require('webpack')

Ajoutez ensuite un morceau de code dans 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: [
// ......
 ]
}

Ensuite, de nombreuses autres solutions disent que l'importer dans main.js est suffisant, mais le questionneur l'a fait.

Importer jQuery dans main.js

import 'jquery'

Utilisez $ or jQuery dans le composant Vue pour écrire le code permettant de faire fonctionner le dom

Puis démarrez le projet

npm run dev

Mais la compilation a signalé une erreur :

http://eslint.org/docs/rules/no-undef '$' n'est pas défini ou

http:// eslint.org/docs/rules/no-undef 'jQuery' n'est pas défini

Que se passe-t-il ? ? ?

3.eslint check

Les amis intelligents ont dû penser que c'est lié à eslint Oui, la prochaine étape que vous devez faire à ce moment est de modifier . eslintrc dans le répertoire racine.js, dans le module.exports du fichier modifié, ajoutez une paire clé-valeur jquery: true pour env, soit :

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

encore npm run dev, OK, pas d'erreur , allez vite Essayez-le dans le composant console.log($('selector')), vous constaterez que vous pouvez utiliser avec succès jQuery pour obtenir le DOM.

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!