Cách sử dụng một plugin jQuery bên trong Vue

Question

Tôi đang xây dựng một ứng dụng web bên trong VueJS nhưng tôi gặp phải một vấn đề. Tôi muốn sử dụng một phần mở rộng jQuery (cropit được cụ thể) nhưng tôi không biết làm thế nào để nhanh chóng/yêu cầu/nhập khẩu nó đúng cách mà không nhận được lỗi.

Tôi đang sử dụng công cụ CLI chính thức và mẫu webpack cho Ứng dụng của mình.

tôi bao gồm jQuery như thế này trong tập tin main.js tôi:

import jQuery from 'jQuery' 
window.jQuery = jQuery 

Bây giờ tôi đang xây dựng một thành phần biên tập hình ảnh mà tôi muốn nhanh chóng len lỏi như thế này:

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

Nhưng tôi tiếp tục nhận được lỗi ... Bây giờ câu hỏi của tôi là làm thế nào để nhanh chóng instantiate jQuery và plugins thông qua NPM/Webpack/Vue?

Cảm ơn trước!

Answer 1

Lựa chọn # 1: Sử dụng ProvidePlugin

Thêm ProvidePlugin đến các mảng plugins trong cả build/webpack.dev.conf.js và build/webpack.prod.conf.js để jQuery trở nên toàn cầu có sẵn cho tất cả các module của bạn:

plugins: [ 

    // ... 

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

Lựa chọn # 2: Sử dụng Expose Loader mô-đun cho webpack

Như @TremendusApps gợi ý trong câu trả lời của mình, thêm Expose Loader gói:

npm install expose-loader --save-dev 

sử dụng trong entry point của bạn main.js như thế này:

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

// ... 

Answer 2

Bạn cần sử dụng trình tải globals hoặc expose để đảm bảo rằng webpack bao gồm lib lib trong đầu ra mã nguồn của bạn và do đó nó không ném lỗi khi bạn sử dụng $ trong các thành phần của bạn.

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

Nếu bạn thích, bạn có thể nhập (yêu cầu) nó trực tiếp trong cấu hình webpack của bạn như là một điểm nhập cảnh, vì vậy tôi hiểu, nhưng tôi không có một ví dụ của việc này đến tay

Ngoài , bạn có thể sử dụng globals nạp như thế này: https://www.npmjs.com/package/globals-loader

Answer 3

tôi sử dụng nó như thế này:

import jQuery from 'jQuery' 

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