在 Vue 3 中全局使用 JQuery

Question

我只是想導入 JQuery 以在我的 Vue 3 應用程序中全局使用，但我收到錯誤window.$ is not a function 。

我已經關注了另一篇文章： 將 Jquery 添加到 Vue-Cli 3

我在 main.js 中定義了 JQuery ，如下所示：

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

JQuery 通過 npm 安裝，這工作正常。 但是，每當我嘗試在我的任何組件中使用window.$時（在 my.vue 文件中的腳本標簽下），我都會收到window.$ is not a function的錯誤

我是怎么搞砸的？

Answer 1

由於我閱讀了您的評論並了解您實際需要什么。 這個答案基於您的實際需要，而不是您想要做什么。 我相信這種方法更好 使用不依賴於 jQuery 的 Boostrap 5，您可以使用所有功能，如下拉菜單、彈出窗口等，無需 jQuery。 在通過npm install bootstrap安裝 boostarp 后，在 main.js 中導入以下內容

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp

安裝npm install bootstrap因為您必須像我上面顯示的那樣包含它們。 根據Bootstrap 文檔。

注意： Vue3 不支持 boostrap 4，而 vue-boostrap 使用 boostrap 5

Answer 2

這就是我的 Vue 3 和 Nuxt-bridge 應用程序的最終結果。 我確定我的 package.json 中沒有任何版本的 bootstrap、popper 或 jquery

我將此添加到nuxt.config.js文件中：

script: [
      {
        src: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js",
        type: "text/javascript"
      },
      {
        src: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js",
        integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ",
        crossorigin:"anonymous"

      }
]