如何在 Vue.js 3 / Vite 应用程序中将 jQuery 导入 $

Question

我正在尝试使用 Vite (https://github.com/vitejs/vite) 将 jQuery 包含在 Vue.js 3 项目中。

我在 package.json 依赖项中包含 jQuery：

  "dependencies": {
    "@types/jquery": "^3.5.0",
    "jquery": "^3.5.1",
    "vue": "^3.0.0-rc.1"
  },

我将其导入到Vite的骨架

main.js

中，第一行：

import * as $ from "jquery";

但这实际上并没有将 jQuery 对象导入到

$

（它导入了其他东西）。

但是，如果我将其更改为：

import * as jqueryExports from "jquery";
...
window.$ = jqueryExports.default;

然后一切正常。

我很确定这不是预期的方式。另外，我怀疑这个问题不是Vite特有的，但我没有用Webpack尝试过。

导入 jQuery 的正确方法是什么？

Answer 1

你有没有这样尝试过：

import $ from "jquery";

或者尝试简单地将其加载到 vuejs 之前的 header 中

<script  src="https://code.jquery.com/jquery-3.5.1.min.js"  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  crossorigin="anonymous"></script>

Answer 2

好吧，使用

vite

和

Vue

，我导入了jQuery及其插件，如下所示：

import './assets/js/semantic.min.css'
import  './assets/js/jquery-3'
import './assets/js/semantic.min.js' 

这段代码对我有用，我可以在所有组件中使用 jquery，尽管我不认为这是在 Vue 中使用 jQuery

及其插件的正确方法