web-dev-qa-db-ja.com

Vue内でjQueryプラグインを使用する方法

VueJS内でWebアプリケーションを構築していますが、問題が発生します。 jQuery拡張機能（具体的にはクロップ）を使用したいのですが、エラーを発生させずに正しい方法でインスタンス化/要求/インポートする方法がわかりません。

私は自分のアプリでde official CLIツールとde webpackテンプレートを使用しています。

Main.jsファイルに次のようなjQueryを含めました。

import jQuery from 'jQuery'
window.jQuery = jQuery

今、私はこのようなクリープをインスタンス化したい画像エディタコンポーネントを構築しています：

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

しかし、エラーが発生し続けます...今、私の質問は、NPM/Webpack/Vueを介してjQueryとプラグインを適切にインスタンス化する方法ですか？

前もって感謝します！

jqueryjquery-pluginswebpackvue.js
36
Luuk Van Dongen

オプション＃1：ProvidePluginを使用

JQueryがすべてのモジュールでグローバルに利用できるように、 ProvidePlugin をbuild/webpack.dev.conf.jsとbuild/webpack.prod.conf.jsの両方のプラグイン配列に追加します。

plugins: [

  // ...

  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

オプション＃2：webpackにExpose Loaderモジュールを使用する

@TremendusAppsが答えで示唆しているように、 Expose Loader パッケージを追加します。

npm install expose-loader --save-dev

エントリポイントでmain.jsを次のように使用します。

import 'expose?$!expose?jQuery!jquery'

// ...
54
prograhammer

globals loaderまたはexpose loaderのいずれかを使用して、webpackがソースコード出力にjQuery libを含め、コンポーネントで$を使用するときにエラーをスローしないようにする必要があります。

// 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')

必要に応じて、エントリのポイントとしてwebpack config内に直接インポート（必須）することができます。

または、次のようにグローバルローダーを使用できます。 https://www.npmjs.com/package/globals-loader

6
Tremendus Apps

Vue-cliで作成されたVueプロジェクト（たとえば、vue init webpack my-project）があるとします。プロジェクトディレクトリに移動して実行します

npm install jquery --save

ファイルbuild/webpack.base.conf.jsを開き、pluginsを追加します。

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

また、ファイルの先頭に次を追加します。

const webpack = require('webpack')

ESLintを使用している場合は、.eslintrc.jsを開き、次のグローバルを追加します：{

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

これで準備完了です。 jsのどこでも$を使用します。

NOTEこれを使用するために公開ローダーやその他のものを含める必要はありません。

元々 https://maketips.net/tip/223/how-to-include-jquery-into-vuejsから

5
SkuraZZ

最初にnpmを使用してjqueryをインストールし、

npm install jquery --save

私が使う：

global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
4
Rafael Andrs Cspedes Basterio

私はこれを次のように使用します：

import jQuery from 'jQuery'

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },
2
lukpep

ステップ1プロジェクトのフォルダーに端末を置いて、npmまたはyarnを介してJQueryをインストールします。

npm install jquery --save

ステップ2 JQueryを使用するファイル内で、たとえばapp.js（resources/js/app.js ）、スクリプトセクションに次のコードを含めます。

// 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
1
Vladimir Salguero

vueファイルの<script>タグ内にjqueryをインポートします。

これが最も簡単な方法だと思います。

例えば、

<script>
import $ from "jquery";

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

はるかに簡単な方法があります。これを行う：

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>

npm install jqueryでJQueryが最初にインストールされていることを確認してください。プラグインでも同じことを行います。

0
ccleve