Vue 局部引入 jQuery 及依赖 jQuery 的第三方插件

mac2026-09-25  9

虽然在 Vue 中不推荐使用 jQuery ,但有时候要使用一个插件,这个插件又依赖于 jQuery ,则没有更好的办法

更多精彩

更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线

写在前面的话

如果实在是因为无法避免的原因,需要在 Vue 项目中使用到 jQuery则建议使用局部引入的方式,就是哪个文件需要用到 jQuery ,就在哪个文件中引入在网上搜 “Vue 引入 jQuery” ,能找到的基本上都是全局引入的方式 会涉及到需要修改 webpack 的配置文件 或者使用 expose-loader 的插件来实现 jQuery 的局部引入其实没必要,就普通的引入方式即可

解决方式

安装 jQuery

在项目的 package.json 中安装 jQuery ,这个是必须的 之后运行 npm i 即可实现安装 “dependencies”: { ... “jquery”: “^1.12.4” }

引入第三方插件

前往需要用到插件的 .vue 文件中,在 <script> 顶部引入以下代码由于 jQuery 是使用 webpack 安装的,所以通过 import 引入,并指定别名插件则是本地引入的,所以使用 require 的方式 import $ from ‘jquery’ window.jQuery = $ require(‘assets/plugins/pictureTag/picture.tag’) 添加 window.jQuery = $ 则是因为插件内部会需要使用名为 jQuery 的引用 (function (window, $) { ... })(jQuery(window), jQuery)

使用第三方插件

由于 jQuery 相关插件基本上涉及到操作 DOM 元素所以需要在 $nextTick 中使用之后按照传统的 jQuery 操作方式编写插件调用代码即可 this.$nextTick(() => { ... })
最新回复(0)