目前，在學習使用Vue2.0開發新的項目。然而目前用Vue實現的UI框架裡面，尚未出現具有像bootstrap一樣統治力的框架。一番糾結後，老夫…
那麼問題來了，在Vue中如何引入jQuery和swiper呢？
經歷半天搜索、比對、嘗試之後，得出了下面的結論，單用 webpack 時設置同理。
引入jQuery
這個問度娘就有很多方案，我這裡選取的是將jQuery暴露到全局的方式，這樣就不用每個用到的地方都要import一次
安裝 jQuerynpm i -S jQuery //等同於 npm install –save jQuery
設置 webpack.config.jsvar webpack = require(‘webpack’)
const ProvidePlugin = new webpack.ProvidePlugin({//引入外部類庫
$: ‘jquery’,
jQuery: ‘jquery’,
});
module.exports = {
…
plugins: [
ProvidePlugin,
],
…
}
對於web前端學習不懂的，或者不知道怎麼學習的可以來我的前端群477149581，源碼已上傳群文件，不管你是小白還是大牛，小編都歡迎，群不定期分享乾貨，歡迎初學和進階中的小夥伴。
至此，可全局使用熟悉的$符號了。
更多辦法
使用 exports-loader
設置 externals（詳情參考推薦答案）
普通 import（也就是接下來要說的辦法）
引入swiper插件
本來設置externals後再在index.html中引用的辦法也是挺好的，但在我的項目中只有一個頁面用到，而且externals方式不知如何設置css（還望高人指點），故選擇普通import的方式。
此法無需在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了。
最後
雖以上皆經過實戰檢驗，但若有錯誤歡迎指正。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/273388.html
微信掃一掃 
支付寶掃一掃 