Tutoriel sur la façon d'utiliser jQuery dans Vue

本文主要和大家分享Vue 中使用 jQuery的方法教程，编译报错：
$ is undefined or no-undef '$' is not defined
，
假设你已经使用vue-cli搭建好了开发的脚手架，接下来如下：

Installez jQuery et exécutez le code suivant dans le répertoire racine du projet

npm install jquery --save

configuration du webpack

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

Puis dans le module. Ajoutez un morceau de code

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

aux exportations. 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 l'erreur de compilation est signalée :

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

Que se passe-t-il ? ? ?

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 à la racine. Après avoir modifié le fichier Dans module.exports, ajoutez simplement une paire clé-valeur jquery: true à 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.

Recommandations associées :

Explication détaillée des trois formes d'écriture des composants vue

Explication détaillée de vue Ajouter la méthode de code vux

Améliorations de TypeScript dans Vue 2.5

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!