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

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

更多精彩

写在前面的话

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

解决方式

安装 jQuery

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

引入第三方插件

  1. 前往需要用到插件的 .vue 文件中,在 <script> 顶部引入以下代码
  2. 由于 jQuery 是使用 webpack 安装的,所以通过 import 引入,并指定别名
  3. 插件则是本地引入的,所以使用 require 的方式
1
2
3
4
import $ from jquery

window.jQuery = $
require(assets/plugins/pictureTag/picture.tag)
  1. 添加 window.jQuery = $ 则是因为插件内部会需要使用名为 jQuery 的引用
1
2
3
(function (window, $) {
...
})(jQuery(window), jQuery)

使用第三方插件

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