Vue導入非模塊化的第三方插件功能無效解決方案

　　一、問題：

　　　　最近在寫vue項目時，想引入某些非模塊化的第三方插件時，總是發現會有報錯。且在與本地運行插件測試對比時發現插件根本沒有注入到jQuery中（console.log($.fn)查看當前jq有哪些方法），例如：

　　　　

       本地測試                                     　　　　　　　　　　　　　　　　　　　　　　　　　　　Vue頁面測試

Object [jquery: "1.10.2",  …]           　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Object [jquery: "1.10.2",…] 
  .                                                                                         .
  .                                                                                         .
  .                                                                                         .
val: ƒ (e)                                                                                val: ƒ (e)
velocity: ƒ ()                                                                          width: ƒ (i,o)
width: ƒ (i,o)                                                                            wrap: ƒ (e) 
wrap: ƒ (e) wrapAll: ƒ (e)
wrapAll: ƒ (e) wrapInner: ƒ (e)
wrapInner: ƒ (e) 

　　二、原因：

　　　　由於jQuery這類的通用插件基本都是在模塊化引入進來，即在webpack.base.conf.js里引入，每個頁面使用的都是通用jq，單頁面引入的第三方插件並不會注入到通用的jq中，故jq內無插件方法。

 plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

　　　　肯定有人會疑惑，那我在單頁面再單獨引入jQuery與插件可以嗎，很不幸地是此時js加載順序是：單頁面jQuery--->插件--->模塊化jQuery--->插件，也就是說模塊化的jq肯定會加載進來。

　　　　

import  '../../static/jquery-background/js/jquery.min.js';
import  '../../static/jquery-background/js/velocity.js';

 

　　三、解決方案：

　　　既然模塊化jq肯定會加載進來，只需把模塊化jq引入單頁面，拿插件方法注入。

　　　步驟：

　　　　①新建任意名.js，例如jquery-vendor.js；添加如下內容：

import $ from 'jquery'
window.$ = $
jQuery = $
window.jQuery = $
export default $

　　　　②將新建的js與插件放在static下同一文件夾下，然后vue頁面引入即可:

import $ from '../../static/jquery-background/js/jquery-vendor.js';
import  '../../static/jquery-background/js/velocity.js';