在Vue/webpack引入第三方插件jQuery/swiper：簡單易行

寫在前面

日前，在學習使用Vue2.0開發新的項目。然而目前用Vue實現的UI框架裏面，還沒有出現具備像bootstrap同樣統治力的框架。一番糾結後，老夫抄起傢伙就是一梭...

那麼問題來了，在 Vue中如何引入 jQuery和 swiper呢？

經歷半天搜索、比對、嘗試以後，得出了下面的結論，單用 webpack 時設置同理。

引入jQuery

這個問度娘就有不少方案，我這裏選取的是將 jQuery暴露到全局的方式，這樣就不用每一個用到的地方都要 import一次

安裝 jQuery

npm i -S jQuery //等同於 npm install --save jQuery

設置 webpack.config.js

var webpack = require('webpack')
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部類庫
  $: 'jquery',
  jQuery: 'jquery',
});
module.exports = {
...
plugins: [
    ProvidePlugin,
  ],
...
}

至此，可全局使用熟悉的$符號了。

更多辦法

• 使用 exports-loader（按照官方例子實測，配置簡單成謎，然而無效，求指點）
• 設置 externals（詳情參考推薦答案）
• 普通 import（也就是接下來要說的辦法）

引入swiper插件

原本設置 externals後再在 index.html中引用的辦法也是挺好的，但在個人項目中只有一個頁面用到，並且 externals方式不知如何設置 css（還望高人指點），故選擇普通 import的方式。

vue-awesome-swiper的使用能夠參考 這篇文章

此法無需在index.html引用其JS或CSS，但每一個用到的頁面都須要import一次，jQuery也可用此法引入。

簡單粗暴import

在 script 中 import 其 js文件

import Swiper from '../assets/lib/swiper-3.4.2.min.js'

在 style 中 @import 其 css文件

@import '../assets/lib/swiper-3.4.2.min.css';

至此，能夠像往常同樣使用又愛又恨的swiper了。

最後

這裏只舉了 jq和 swiper的例子，同理 其餘插件也是可用一樣的方法引入。雖以上皆通過實戰檢驗，但如有錯誤歡迎指正。若是對你有幫助，那就點個讚唄。逃。