怎样在Vue.js中使用jquery插件

Posted 2023-03-21

使用vue-cli构建的vue项目，webpack的配置文件是分散在很多地方的，而我们需要修改的是build/webpack.base.conf.js，修改两处的代码
// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports =
// 其他代码...
resolve:
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias:
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),

// webpack 使用 jQuery，如果是自行下载的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安装的jQuery
'jquery': 'jquery'

,

// 增加一个plugins
plugins: [
new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery"
)
],

// 其他代码...
参考技术A 这两个并不冲突啊
你页面怎么引入vue.js文件的 就怎么引入jquery

在 Vue.js 单文件组件中使用 jQuery 插件

【中文标题】在 Vue.js 单文件组件中使用 jQuery 插件

【英文标题】：Using jQuery plugin in Vue.js single file component

【发布时间】：2019-05-26 18:45:22

【问题描述】：

我正在尝试在我的 Vue.js 单文件组件中使用 this jQuery 插件。

根据链接的自动完成插件的要求，我在index.html 中导入了引用，以便它们可以在我需要在input field 中使用autocomplete 功能的所有其他vue 组件中使用。

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

但是当我在我的单个文件组件的脚本标记中包含以下代码时。

 $("#autocomplete").autocomplete(
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    );

我得到错误控制台说：

> TypeError: $("#autocomplete").autocomplete is not a function. (In
> '$("#autocomplete").autocomplete(
>     source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] )', '$("#autocomplete").autocomplete' is undefined)

但是我已经在index.html中包含了依赖项

【参考方案1】：

我建议你不要在 Vue 中使用 Jquery。它的坏习惯。您可以使用许多 vue 插件，甚至可以创建自己的插件（恕我直言，这是最好的选择）

https://www.npmjs.com/package/vue2-autocomplete-js https://github.com/paliari/v-autocomplete https://vuejsexamples.com/tag/autocomplete/ https://alligator.io/vuejs/vue-autocomplete-component/

【讨论】：

我同意你的看法，但是现在我时间不够，昨天晚上我熬夜使用 jQuery 来搞定事情

【参考方案2】：

检查 html 中 js 文件/脚本的顺序。 Vue 脚本可能在加载 jQuery 之前执行。将 jQuery 相关的脚本标签移到 Vue 脚本标签上方。您还可以通过检查 window.$ 的存在来安全地检查 Vue 脚本中是否有 jQuery：

if (typeof window.$ === 'function') 
  $("#autocomplete").autocomplete(
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    );

【讨论】：

好吧，如果是 jQuery 没有加载的情况，那么我可能会在 $("#autocomplete") 处感到恐惧，但我收到错误 .autocomplete

@Ciastopiekarz 是的，我的错误没有注意到这一点。但是，我无法在 CodeSandbox codesandbox.io/s/74wy254mx0 中重新创建您的问题。如果你能提供更多关于如何使用 jQuery UI 实现 Vue 组件的详细信息，我可能会找到一些东西。

谢谢@blaz，如果可以请看一下，我已经将我的项目上传到codebase

我正在使用导致问题的 eonasdan-bootstrap-datetimepicker 组件，所以我摆脱了它并使用了 vue-datetime 组件，然后经过 4 天的努力，我终于成功添加了基于 jQuery 的自动完成工作完美，但我的表单有第二个输入字段需要相同的功能，我意识到即使我们为两个不同的输入字段设置了不同的 ID，它也会重置旧的。所以我只能使用 1 个具有自动完成功能的输入字段。

@Ciastopiekarz 抱歉，我无法弄清楚您的代码有什么问题。即使在 main.js 中，autocomplete 也没有定义，而在我的演示中它就在那里。

【参考方案3】：

解决方案：使用组件作为包装器

在此处查看教程： https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

【讨论】：

;( 第一行说：> 在同一个 UI 中使用 jQuery 和 Vue.js 不是一个好主意。如果可以避免，请不要这样做。其次，我在实例化时间

是的，我也不建议在 Vue.js 中使用 jquery，如果你只是想要一个自动完成功能，那里有很多组件。例如这个npmjs.com/package/vue2-autocomplete-js

我第一次尝试过，但根本没有用，我也triedvie-single-select 遇到问题，您无法输入不在列表中的新项目