Добавьте Jquery к Vue-Cli 3 - PullRequest
Новая
       7

Добавьте Jquery к Vue-Cli 3

0 голосов
/ 17 ноября 2018

Я сейчас пытаюсь добавить Jquery в мой vue-cli проект. Я знаю о том, что такое поведение может произойти, но в любом случае; Поскольку build/webpack.base.conf.js больше нет, я попытался отредактировать vue.config.js, добавив: 

 module.exports {
    ...
    chainWebpack: config => {
    config.plugin('define').tap(definitions => {
      definitions[0] = Object.assign(definitions[0], {
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery',
        _: 'lodash'
      })
      return definitions
    })
  }
   ...
 }

или 

const webpack = require('webpack')

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

Кажется, что оба варианта не работают. С # 1, похоже, ничего не происходит, с # 2 я получаю ошибку компиляции; «плагины» не разрешены или «ProvidePlugin» не разрешен и когда я пытаюсь импортировать jQuery непосредственно в main.js и определяю оператор $, jquery остается неопределенным, когда я пытаюсь его использовать.

Большое спасибо заранее!

Ответы [ 3 ]

0 голосов
/ 18 декабря 2018

# 2 Вы забыли добавить configureWebpack в vue.config.js 

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
}
0 голосов
/ 27 апреля 2019

Я сделал это, выполнив следующие действия:

сначала установите jquery 

npm install jquery --save-dev

в любом компоненте или представлении: 

<script>

import jQuery from "jquery";
const $ = jQuery;
window.$ = $;

....
....
....

или, как указано выше, оба ответато же самое: 

window.$ = window.jQuery = require("jquery");

теперь вы можете использовать его в любом месте на странице, для глобальной доступности просто следуйте вышеуказанному ответу.

0 голосов
/ 18 ноября 2018

Решил , добавив к main.js:

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

Это было сделано для меня, и теперь jQuery доступен по всему миру . Другой подход будет; 

Vue.use({
install: function(Vue, options){
    Vue.prototype.$jQuery = require('jquery'); // you'll have this.$jQuery anywhere in your vue project
}

})

Надеюсь, это поможет кому-то в будущем столкнуться с той же проблемой. Если вы все еще не можете понять, проверьте этот вопрос или посмотрите документацию .

edit: , как сказал Filipe, убедитесь, что вы запускали npm install jquery раньше.

...