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