在 Vue 项目中包含或初始化 jQuery 库的最佳方法是啥？

Posted 2023-02-22

【中文标题】在 Vue 项目中包含或初始化 jQuery 库的最佳方法是啥？

【英文标题】：What is the best way to include or initialize jQuery library in Vue project?在 Vue 项目中包含或初始化 jQuery 库的最佳方法是什么？

【发布时间】：2017-11-13 20:21:18

【问题描述】：

在 Vue 项目中包含 jQuery 库的最佳方式是什么？

我正在使用 vue-cli、webpack 和路由器。我有单独的组件，我需要包含一些 jQuery 插件。如果我在索引文件中包含 jQuery 脚本，那么我将无法从组件中操作（触发）DOM。所以我想最好在我的 main.js 或组件中包含所有脚本？

我需要实现Venobox 插件。 这是基本的 jQuery 初始化

$(document).ready(function()
    $('.venobox').venobox(); 
);

在 Vue 中我尝试过

  mounted () 
    $('.venobox').venobox();
  

现在我遇到了 jQuery 的问题。 '$' 未定义等。 在 Vue 项目中包含外部 JS 文件的最佳实践是什么？ 有没有简单的方法来初始化 jQuery 插件？

谢谢！

【问题讨论】：

jQuery 和 vue 应该可以在同一个页面上并排工作没有问题。如果你想在 vue 组件中使用 jQuery，mounted() 看起来是一个很好的方向。你能像安装Vue一样在页面上安装jQuery吗？

您使用的是纯 javascript 吗？或类似 webpack 的东西？

假设你用 npm 安装了 jQuery，你可以用 import $ from "jquery"; 导入它。

@Kos，我通过 NPM 安装了 jquery

@Gerard，我正在使用 webpack

【参考方案1】：

如果只有这一个使用 jQuery 的组件，我会专门在其中导入它，而不会打扰其他任何东西。您的代码是正确的（在 mounted 生命周期挂钩内初始化 venobox），但您还必须在组件中导入 jQuery：

import $ from 'jquery';

export default 
  mounted () 
    $('.venobox').venobox();
  

但是，如果您也在其他组件中使用 jQuery，我建议您在此处查看此答案 https://***.com/a/39653758/2803743。在此处粘贴选项 1，以防它被删除/更改（使用 Webpack 的 ProvidePlugin）：

选项 #1：使用 ProvidePlugin

将 ProvidePlugin 添加到 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 中的 plugins 数组中，以便 jQuery 对您的所有模块全局可用：

plugins: [
  // ...

  new webpack.ProvidePlugin(
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  )
]

【讨论】：

谢谢卡诺，我还在我的 main.js 文件中加入了 'require('venobox')' 并且工作起来就像一个魅力。

太棒了！如果此答案对您有所帮助，您可以将其标记为正确答案，以帮助未来的答案寻求者:)

【参考方案2】：

主 js 文件将被 webpack 编译：

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

require('venobox/venobox');

window.Vue = require('vue');

// Register your components and your global Vue instance after that

我想您已经从 package.json 文件中安装了依赖项。

您只需在注册组件之前导入所有依赖项。