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

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

根据链接的自动完成插件中的要求，我在

index.html

中导入了引用，以便在需要使用

输入字段中的
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>

我得到的错误控制台说：

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

但是我已经在
index.html

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

请在此处查看教程：
检查html中js文件/脚本的顺序。Vue脚本可能是在加载jQuery之前执行的。将jQuery相关脚本标记移到Vue脚本标记上方。通过检查
窗口是否存在，您还可以安全地检查Vue脚本中是否有jQuery可用。$
：

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

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

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/
；（第一行说：>在同一个UI中使用jQuery和Vue.js不是一个好主意。如果可以避免，请不要这样做。其次，我在实例化时出错。是的，我也不建议在Vue.js中使用jQuery，如果您只想使用自动完成功能，那么有很多组件。例如，我在fi中尝试过这种方法rst尝试，但这根本不起作用，我也在单选择中遇到了问题。您无法在列表中输入新项目。如果jQuery没有加载，那么我可能会在
$（“#自动完成”）时感到恐惧
但我遇到了错误
。自动完成
@Ciastopiekarz是的，我的错误没有注意到。但是，我无法在CodeSandbox中重新创建您的问题。如果您能提供更多关于如何使用jQuery UI实现Vue组件的详细信息，我可能会找到一些东西。谢谢@blaz如果您能看一看，那将非常好，我已经上传了在我的项目中，我使用了导致问题的eonasdan引导datetimepicker组件，所以我放弃了它，使用了vue datetime组件。经过4天的努力，我终于成功地添加了基于jQuery的自动完成功能，但我的表单有第二个输入字段，需要相同的功能，我意识到即使我们为两个不同的输入字段设置不同的id它会重置旧的输入字段。因此，我只能使用一个具有自动完成功能的输入字段。@Ciastopiekarz抱歉，我无法找出您的代码有什么问题。即使在main.js中，
autocomplete
在我的演示中也没有定义。我同意您的看法，但现在我时间不够，昨天晚上，我熬夜使用jQuery让事情正常运行
if (typeof window.$ === 'function') {
  $("#autocomplete").autocomplete({
        source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
    });
}