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

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

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

解决方式

安装 jQuery

1. 在项目的 package.json 中安装 jQuery ，这个是必须的
   • 之后运行 npm i 即可实现安装

 

“dependencies”: {
  ...
  “jquery”: “^1.12.4”
}

或者

npm install jquery

引入第三方插件

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

import $ from ‘jquery’

window.jQuery = $
require(‘assets/plugins/pictureTag/picture.tag’)

4. 添加 window.jQuery = $ 则是因为插件内部会需要使用名为 jQuery 的引用

(function (window, $) {
...
})(jQuery(window), jQuery)

使用第三方插件

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

this.$nextTick(() => {
  ...
})

 

来源:https://blog.csdn.net/asing1elife/article/details/102873835