Vue2 + jQuery + jQuery UI

5q4ezhmt 于 12个月前发布在 jQuery

关注(0)|答案(2)|浏览(170)

如何在一个Vue.js组件中使用jQuery和jQuery-UI？导入这两个组件并使其协同工作的最佳方法是什么？

import $ from 'jquery'

字符串
我尝试了上面的导入，它工作，但我如何添加jquery-ui？
回答：Vue组件的最终代码看起来像这样：

<template>
    <input id="test" />
</template>
<script>
import $ from 'jquery'
import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/themes/base/all.css'
export default {
  name: 'Dashboard',
  mounted(){
    $("#test").datepicker()
  }
}
</script>

型

jquery

来源：https://stackoverflow.com/questions/51648926/vue2-jquery-jquery-ui

2条答案

按热度按时间

t1qtbnec1#

我已经晚了几年，但我在Vue 3上也遇到了同样的问题。我可以在main.js中轻松地将Jquery添加到Vue应用程序本身，但我似乎无法添加Jquery-UI功能

//Main.js
import $ from 'jquery';
import 'jquery-ui'; 
//This doesn't throw any errors in Vue CLI, but all jquery-UI functions return 'not a function' error

字符串
最后，我从main.js中删除了Jquery，并将Jquery和Jquery-UI脚本添加到public/index.html中，如下所示。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">

  </head>
  <body>
    <noscript>
      <strong>We're sorry but Apprentice Buddy doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
    integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous">
  
  </script>
</html>

型
你应该仍然可以在Vue组件方法中使用Jquery。* 如果还不明显，Jquery是全局添加的，它不是本地化到特定组件。*

赞(0）回复(0）举报 12个月前

5w9g7ksd2#

更好的方法是：只导入你感兴趣的那些方面：例如，导入'jquery-ui/ui/widgets/draggable';

赞(0）回复(0）举报 12个月前