vue3 vite ts进行开发的时候，怎么使用引入jquery

在用vue3+vite+ts进行开发的时候，怎么使用引入jquery
我是这样弄的，但没有效果

img

img

img

vue组件：

img

安装jquery npm包并在代码中导入

npm install jquery

import $ from 'jquery'

然后就可以在代码中使用$来访问jQuery了。

如果jquery支持esmodule的话 楼上说的是可以的。你那报错有可能是ts的报错。

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇文章：在vue项目中正确的引入jquery 也许有你想要的答案，你可以看看
  • 以下回答来自chatgpt:

    关于在使用vue3+vite+ts进行开发时如何正确地引入jquery的问题，答案如下：

    首先，在vue3中，我们不建议使用jquery，原因是vue3已经有了更好的解决方案，比如使用ref和reactive等API，而且大量使用jquery会导致打包后的文件过大，影响网页性能。

    如果你非常需要在vue3中使用jquery，那么可以按照以下步骤操作：

    1. 安装jquery：使用npm或yarn安装jquery，比如执行以下命令： npm install jquery 或者 yarn add jquery

    2. 在main.ts中引入jquery：在main.ts中将jquery引入并挂载到Vue.prototype上，这样在组件中就可以通过this.$来访问jquery了。代码如下： ``` import { createApp } from 'vue' import App from './App.vue' import jquery from 'jquery'

    const app = createApp(App) app.config.globalProperties.$ = jquery app.mount('#app') ```

    1. 在组件中使用jquery：在组件中通过this.$来访问jquery，比如： export default { mounted () { this.$('#example').slideUp() } }

    但是，强烈建议在vue3中尽量避免使用jquery，而是善用vue3的API来解决问题。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

在使用Vue 3 + Vite + TypeScript进行开发时，不推荐直接引入jQuery。Vue 3是基于现代化的Web开发理念构建的框架，使用Composition API来管理组件逻辑，而且对DOM操作也有很好的支持。引入jQuery可能会引入额外的复杂性和冗余代码。
如果你需要在Vue项目中使用类似jQuery的功能，可以考虑使用现代化的替代方案，如axios用于HTTP请求、Lodash用于常用工具函数等。这些库都提供了类似jQuery的功能，并且与Vue的生态系统更加兼容。
如果你坚持要在Vue项目中使用jQuery，可以按照以下步骤进行操作：

1.安装jQuery库：

npm install jquery

2.在main.js（或其他入口文件）中引入jQuery：

import $ from 'jquery'

3.在Vue组件中使用jQuery：

export default {
  mounted() {
    $(document).ready(function() {
      // 在这里可以使用jQuery进行DOM操作或其他jQuery特性
    })
  }
}

请注意，尽量避免过度依赖jQuery，合理利用Vue的特性和插件，以减少项目的复杂性和维护成本。