Vue / Webpack / Typescript - Как использовать плагин jQuery

Question

Я хочу использовать плагин jQuery, выбранный в моем vue.js / Webpack с приложением TypeScript.

Я прочитал, что лучше обернуть плагин в пользовательский компонент Vue.

Я установил пакеты NPM:

npm install jquery --save
npm install @types/jquery --save
npm install chosen-js --save
npm install @types/chosen-js --save

Мой компонент:

<template>
    <select>
        <option value="1">Test1</option>
        <option value="2">Test2</option>
    </select>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";
    import $ from 'jquery';    
    import 'chosen-js';

    @Component
    export default class ChosenSelect extends Vue{
        @Prop()options!:string;
        @Prop()value!:string;

        mounted() {
            let vm = this;
            let el = $(vm.$el);
            console.log(el);
        }
    }
</script>

Без import 'selected-js' jQuery работает - когда я использую компонент в другом компоненте, я получаю консольный вывод.

При import 'selected-js' Я получаю Uncaught ReferenceError: jQuery is not defined только из выбранной библиотеки.

Как правильно импортировать оба файла - jQuery и selected-js и использовать их в компоненте vue Typescript.

Answer 1

Я бы предложил использовать плагин select для Vue, а не полагаться на плагин на основе jQuery, который несколько отрицает цель использования чего-то вроде Vue с точки зрения манипуляций с DOM. Большинство из них уже содержат свои собственные компоненты, поэтому нет необходимости создавать оболочку.

Здесь представлен большой список ресурсов Vue, не только для плагинов: awesome-vue