Vue.js prend-il en charge jquery ?

vue.js prend en charge jquery. Comment utiliser jquery dans vue : utilisez d'abord "npm install jquery --save" pour installer ; puis configurez webpack et importez jquery dans main.js et enfin, utilisez le code jquery dans les composants requis.

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

En supposant que vous ayez utilisé vue-cli pour créer l'échafaudage de développement, voir ci-dessous.

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

npm install jquery --save

2 Configuration Webpack

Trouvez webpack.base dans le répertoire build du projet. répertoire racine. fichier conf.js, 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.

Importez jQuery dans main.js

import 'jquery'

Utilisez $ ou 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 '$' is not defined or

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

Que se passe-t-il ? ? ?

3. Vérification d'eslint

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

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

npm exécutez à nouveau dev, OK, aucune erreur n'est signalée, dépêchez-vous et essayez-le dans le composant console.log($('selector')) , vous constaterez que vous avez utilisé avec succès jQuery pour obtenir le DOM.

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours vidéo de programmation ! !

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!