将Jquery添加到Vue-Cli 3

Question

我目前正在尝试将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'
   })
  ]
   ...
 }

两种选项似乎都不起作用。使用第一种选项时，似乎什么也没有发生；使用第二种选项时，我遇到了编译错误：“plugins”不被允许或“ProvidePlugin”未解决，当我尝试在main.js中直接导入jQuery并定义$操作符时，当我尝试使用它时，jQuery仍然未定义。

非常感谢您的帮助！

- nonNumericalFloat

---

你看到这个问题了吗？ - ssc-hrep3

是的，谢谢。我已经尝试过了。似乎对我没有用，但我会再试一次，也许这篇文章在改进时会更有帮助。 - nonNumericalFloat

如果您找到了答案，请在问题下面添加一个答案（而不是在问题本身内部）。@nonNumericalFloat - Dekel

@Dekel 感谢您指出这一点。 - nonNumericalFloat

你现在可以接受答案 :) - Dekel

Answer 1

我通过在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
    }
});

我希望这能对未来遇到同样问题的人有所帮助。如果你仍然无法解决，请查看这个问题或查看文档。

编辑：确保你已经运行了npm install jquery。

- nonNumericalFloat

---

记住，在npm中需要有Jquery模块。你可以使用以下命令进行安装：npm install jquery。 - Canatto Filipe

现在我认为这是不好的建议。由于Vue高度反应灵敏，Jquery可能会更改应用程序状态而不告知Vue新状态。这可能导致不一致的状态更改。 请谨慎使用 :) 请参阅https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/ - nonNumericalFloat

Answer 2

#2 你忘记在 vue.config.js 中添加 configureWebpack 配置。

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

- Rdzawobrody

Answer 3

我通过以下步骤完成了它：

首先安装jquery。

npm install jquery --save-dev

在任何组件或视图中：

<script>

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

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

或者像上面的答案一样，两者是相同的：

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

现在您可以在页面中任何地方使用它，实现全局可用性，只需遵循上述答案即可。

- ArifMustafa

Answer 4

请在vue.config.js中添加以下内容：

chainWebpack: (config) => {
  config
    .plugin('provide')
    // eslint-disable-next-line global-require
    .use(require('webpack').ProvidePlugin, [{
      'window.Quill': 'quill/dist/quill.js',
      Quill: 'quill/dist/quill.js',
      'window.jQuery': 'jquery/src/jquery.js',
      jQuery: 'jquery/src/jquery.js',
    }]);
},

- Igor Augusto

---

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Yunnosch