Comment utiliser un plugin jQuery à l'intérieur de Vue

Je suis en train de construire une application web à l'intérieur de VueJS mais je rencontre un problème. Je veux utiliser une extension jQuery (cropit pour être précis), mais je ne sais pas comment instancier/exiger/importation de la bonne façon sans avoir des erreurs.

Je suis à l'aide de officiel de la CLI de l'outil et de webpack modèle pour mon Application.

J'ai inclus jQuery comme ça dans mon main.js fichier:

import jQuery from 'jQuery'
window.jQuery = jQuery

Maintenant, je suis en train de construire une image de l'éditeur de composant où je veux instancier glissée comme ceci:

export default {
  ready () {
    $(document).ready(function ($) {
      $('#image-cropper-wrapper-element').cropit({ /* options */ })
    })
  },
 }

Mais je continue à recevoir des erreurs...Maintenant, ma question est comment instancier jQuery et ses plugins via NPM/Webpack/Vue?

Merci d'avance!

InformationsquelleAutor Luuk Van Dongen | 2016-06-20

56

Option N ° 1: Utiliser ProvidePlugin

Ajouter le ProvidePlugin pour les plugins de tableau dans les deux build/webpack.dev.conf.js et build/webpack.prod.conf.js de sorte que jQuery devient disponible dans le monde entier pour tous vos modules:
```
plugins: [

  //...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]
```
L'Option n ° 2: Utilisation d'Exposer le Chargeur de module pour webpack

Comme @TremendusApps suggère, dans sa réponse, ajoutez le Exposer Le Chargeur De package:
```
npm install expose-loader --save-dev
```
Utiliser dans votre point d'entrée main.js comme ceci:
```
import 'expose?$!expose?jQuery!jquery'

//...
```
- que diriez-vous si je voulais l'inclure dans le webpack.base.conf.js comment aurais-je le faire ?
- Depuis plugins est un tableau, l'objet de fusion permettra de remplacer la matrice dans la base de conf. Donc, ce que vous pourriez faire est de mettre de l'instruction merge dans un var var webpackConfig = merge(baseWebpackConfig, { ... } alors concat les plugins webpackConfig.plugins = webpackConfig.plugins.concat(baseWebpackConfig.plugins), puis enfin à l'exportation module.exports = webpackConfig. Pas très élégant, mais quelque chose sur le haut de ma tête. 🙂
- je viens de tester cela, mais tous mes essais pour jquery échouer à l'aide de vue webpack réutilisable
- Je l'ai testé aussi, et tout de suite remarqué mon Bootstrap listes déroulantes sont de travail (et non pas de se plaindre à propos de Jquery non trouvé). Si cela fonctionne (pour moi).
- dans mycase ne suis pas à l'aide de bootstrap , qui, je suppose nécessite jquery en interne , je suis en utilisant un autre cadre , mais juste nned pour tester si jquery est là , à l'aide de propriété calculée pour tester juery mais return false test () { let r = false if (typeof jQuery === 'undefined') { } else { r = true } return r }
- Laissez-nous continuer cette discussion dans le chat.
- Essayez de le mettre dans quelque chose d'autre dans le plugin ci-dessous le jquery...comme 'test': require('../src/test') et voir si vous obtenez de test dans tous vos composants. Je l'ai fait et il fonctionne.
- Remarque: Pour .js fichiers que vous aurez besoin d'ajouter un /* globals $ */ au début du fichier pour votre linter pour être heureux.
- Voici mon exemple de projet qui pourraient aider à la clarification/débogage de votre situation: github.com/prograhammer/example-vue-project
- veuillez consulter suggéré de modifier et d'appliquer manuellement si elle est correcte - stackoverflow.com/review/suggested-edits/15502106 (` importer 'exposer-chargeur?jquery!jquery" au lieu de import 'expose?$!expose?jQuery!jquery' )
- Construire des fichiers de configuration générés par vue-cli utilisation webpack.base.conf.js comme la base pour la dev et prod des fichiers de configuration, il est donc préférable d'inclure jQuery dans ce fichier.
- Ouais, mais alors vous devez faire une profonde objet de fusionner vos plugins tableau n'est pas remplacé. Je trouve ça plus facile de les glisser dans les deux fichiers. Tout dépend de la préférence personnes.
- Le code pour la profondeur de l'objet de l'opération de fusion est déjà inclus dans le officiels exemple, les utilisateurs n'ont pas besoin de vous soucier de rien
- Aussi, exécuter que sur le dossier de votre projet à l'aide de terminal: npm install --enregistrer jquery
InformationsquelleAutor prograhammer
6

Vous devez utiliser le globals chargeur ou expose chargeur pour s'assurer que webpack comprend la lib jQuery dans votre code source de sortie et donc qu'il ne jette pas des erreurs lors de votre utilisation $ dans vos composants.
```
//example with expose loader:
npm i --save-dev expose-loader

//somewhere, import (require) this jquery, but pipe it through the expose loader
require('expose?$!expose?jQuery!jquery')
```
Si vous préférez, vous pouvez importer (exiger) directement au sein de votre webpack config comme un point d'entrée, si je comprends bien, mais je n'ai pas un exemple à main

Alternativement, vous pouvez utiliser les variables globales chargeur comme ceci:
https://www.npmjs.com/package/globals-loader
- Merci pour la réponse, mais je ne suis pas un expert sur ce sujet. Savez-vous de toute forme de tutoriels sur cette?
InformationsquelleAutor Tremendus Apps
6

Supposons que vous avez Vue projet créé avec vue-cli (par exemple, vue init webpack mon-projet).
Aller à projet dir et exécuter

npm install jquery --save

Ouvrir le fichier build/webpack.base.conf.js et ajouter plugins:
```
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}
```
Également au sommet de l'ajout de fichiers:

const webpack = require('webpack')

Si vous utilisez ESLint, ouvrez .eslintrc.js et ajouter à côté globals: {
```
module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...
```
Maintenant, vous êtes prêt à aller. Utiliser $ n'importe où dans votre js.

NOTE Vous n'avez pas besoin d'inclure exposer le chargeur ou tout autre trucs pour utiliser cela.

À l'origine de https://maketips.net/tip/223/how-to-include-jquery-into-vuejs

InformationsquelleAutor SkuraZZ
4

De la première installation de jquery à l'aide de la ngp,
```
npm install jquery --save
```
J'utilise:
```
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
```
- est-ce à aller sur app.vue?
- Oui, Vous pouvez ajouter cette avant première (principale) vuejs définition du composant, ou dans un autre .fichier js et de l'importer .fichier js.
InformationsquelleAutor Rafael Andrs Cspedes Basterio
2

Je l'utilise comme ceci:
```
import jQuery from 'jQuery'

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },
```
- Mais alors comment voulez-vous ajouter un plugin pour jQuery? Comme j'ai l'intention de le faire.
- Pour inclure un plugin d'utilisation requièrent après le jquery importation ci-dessus. require("<jquery-plugin-name>") puis l'appeler comme normal dans le code jQuery(window).<pluginmethod>
InformationsquelleAutor lukpep
1

Étape 1
Nous nous plaçons avec le terminal dans le dossier de notre projet et installer JQuery par mnp ou de la laine.
```
npm install jquery --save
```
Étape 2
Au sein de notre fichier où nous voulons utiliser JQuery, par exemple app.js (resources/js/app.js), dans la section script nous inclure le code suivant.
```
//We import JQuery
const $ = require('jquery');
//We declare it globally
window.$ = $;

//You can use it now
$('body').css('background-color', 'orange');

//Here you can add the code for different plugins
```
InformationsquelleAutor Vladimir Salguero

importer jquery dans <script> balise dans votre vue de fichier.

Je pense que c'est le moyen le plus facile.

Par exemple,

<script>
import $ from "jquery";

export default {
    name: 'welcome',
    mounted: function() {
        window.setTimeout(function() {
            $('.logo').css('opacity', 0);   
        }, 1000);
    } 
}
</script>

InformationsquelleAutor Wagner

Il y a un bien, moyen beaucoup plus facile. Ce faire:

MyComponent.vue

<template>
  stuff here
</template>
<script>
  import $ from 'jquery';
  import 'selectize';

  $(function() {
      //use jquery
      $('body').css('background-color', 'orange');

      //use selectize, s jquery plugin
      $('#myselect').selectize( options go here );
  });

</script>

Assurez-vous que JQuery est d'abord installé avec npm install jquery. Faire de même avec votre plugin.

InformationsquelleAutor ccleve

Vous devez vous connecter pour publier un commentaire.