将 Jquery 添加到 Vue-Cli 3

Posted 2023-02-22

【中文标题】将 Jquery 添加到 Vue-Cli 3

【英文标题】：Add Jquery to Vue-Cli 3

【发布时间】：2019-04-20 15:49:06

【问题描述】：

我目前正在尝试将 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 我得到编译错误；不允许使用“plugins”或“ProvidePlugin”未解决且 当我尝试直接在 main.js 中导入 jQuery 并定义 $ 运算符时，当我尝试使用它时，jquery 保持未定义。

非常感谢您！

【问题讨论】：

你看到this question了吗？

好的，谢谢。我已经试过了。似乎对我不起作用，但我会再试一次，也许这篇文章在增强后会有所帮助。

@nonNumericalFloat 如果您找到了答案 - 请在问题下方（而不是问题本身）添加答案。

@Dekel 感谢您指出这一点。

你现在可以接受答案了:)

【参考方案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
    
);

我希望这将有助于将来遇到同样问题的人。如果您仍然无法弄清楚，请查看this question 或查看the documentation。

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

【讨论】：

记住在 npm 中必须有 Jquery 模块，你可以这样做：npm install jquery

现在我认为这是一个糟糕的建议。由于 Vue 具有高度反应性，Jquery 可能会在不让 Vue 知道新状态的情况下更改应用程序状态。这可能会导致不一致的状态更改。谨慎使用:) 见vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin

【参考方案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'
      )
    ]
  ,

【参考方案3】：

我是按照以下步骤完成的：

先安装jquery

npm install jquery --save-dev

在任何组件或视图中：

<script>

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

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

或如上答案，两者都是一样的：

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

现在您可以在页面的任何地方使用，为了全球可用性，只需按照上述答案即可。

【参考方案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',
    ]);
,

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。