Как импортировать плагин jquery в проект vuecli3

Question

Я пытаюсь импортировать плагин jquery в мой проект. Я продолжаю получать следующую ошибку.

Uncaught ReferenceError: $ не определено

плагин jquery не добавляется через npm, поэтому я могу предположить, что это может быть причиной проблемы.

Однако сам Jquery импортируется и устанавливается через npm. И я проверил, что это работает.

Я создал проект, используя Vuecli3 Затем мне удалось импортировать и установить jquery через npm.

Затем я создал dir /js/slick.js для своего кода jquery, где файл импортируется, но файл не обнаруживает jquery.

это работает.

app.vue

    export default {
        mounted() {
            $("body").html("This is Hello World by JQuery");
        }

    }

main.js

    import Vue from 'vue'
    import App from './App.vue'
    window.$ = window.jQuery = require('jquery');

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Следующее не работает, даже если оно подхватывает / обнаруживает файл. (Я также попытался загрузить JQuery локально) (slick.js - это просто привет)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // window.$ = window.jQuery = require('jquery');
    // window.jQuery = require('jquery');
    // var $ = window.jQuery;

    require("../js/slick.js");
    import slick from '../js/slick.js';
    export default {


    }

Я все еще новичок в сценарии настройки всего проекта.

но я подумал, что, возможно, мне стоит добавить его к моим зависимостям в package.json

      "dependencies": {
        "core-js": "^2.6.5",
        "jquery": "^3.4.1",
        "vue": "^2.6.10",
        "vue-draggable-resizable": "^2.0.0-rc2",
        "slick": "./js/slick.js"
      },

это не имело никакого значения.

ошибка консоли js

slick.js?a016:1 Uncaught ReferenceError: $ is not defined
    at eval (slick.js?a016:1)
    at Object../src/js/slick.js (app.js:2270)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Item.vue?vue&type=script&lang=js&:2)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Item.vue?vue&type=script&lang=js& (app.js:840)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (Item.vue?12bc:1)
    at Module../src/components/Item.vue?vue&type=script&lang=js& (app.js:2247)

Answer 1

зайдите в каталог вашего проекта в вашем терминале и напишите

npm install jquery

и в вашем App.vue напишите

const $ = require('jquery');
window.$ = $;