Maison  >  Article  >  interface Web  >  Comment utiliser jq dans vue.js

Comment utiliser jq dans vue.js

coldplay.xixi
coldplay.xixioriginal
2020-11-11 15:49:352766parcourir

Comment utiliser jq avec vue.js : installez d'abord jQuery via NPM, le code est [npm install jquery --save] puis configurez webpack, le code est [var webpack = require('webpack') ] ; vérifiez enfin Eslint.

Comment utiliser jq dans vue.js

[Recommandations d'articles connexes : vue.js]

vue.js utilise jq Méthode :

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

npm install jquery --save

2.

Recherchez le fichier

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. webpack.base.conf.js

var webpack = require('webpack')

Ensuite, ajoutez 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 l'interrogateur a emboîté le pas.

Importer jQuery dans main.js

import 'jquery'

Utilisez-le dans le composant Vue

Écrivez le code pour faire fonctionner le dom$ or jQuery

Puis démarrez le projet

npm run dev

Mais une erreur a été signalée lors de la compilation :

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. Vérification d'Eslint

Des amis sages ont dû penser que c'est lié à Eslint Oui, la prochaine étape que vous devez faire à ce moment est de modifier le. répertoire racine

Fichier, dans le module.exports du fichier modifié, ajoutez une paire clé-valeur .eslintrc.js pour env, c'est-à-dire : jquery: true

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

npm exécutez à nouveau dev, OK, pas d'erreur, allez au composant Essayez-le ici, 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Pourquoi vue.js est légerArticle suivant:Pourquoi vue.js est léger