前言
在使用webpack作為構(gòu)建工具，開(kāi)發(fā) vue項(xiàng)目的時(shí)候锨亏，難免會(huì)用到 jquery這種第三方插件（畢竟都是從用jquery過(guò)來(lái)的）夭坪，那么怎么引用呢雏婶？接下來(lái)我來(lái)說(shuō)三種方法。
- 1
html模板文件引用法橡庞，這種方法最直接也是我們最熟悉较坛，直接在項(xiàng)目中的網(wǎng)頁(yè)模板文件中加入jquery的引用即可
a.引用
image.png
b.使用
image.png
- 2
expose-loader引用法
a. 安裝
jquery
npm i jquery -D
b.
main.js中引用jquery
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'//加入此行
Vue.config.productionTip = false
console.warn("==============main.js輸出$對(duì)象======================");
console.log($);
console.log(window.$);
image.png
說(shuō)明 此時(shí)我們會(huì)發(fā)現(xiàn)，main.js中我們引用了 jquery毙死，$符號(hào)我們可以正常使用燎潮，但 window.$卻不能，而且 helloWorld這個(gè)組件中也引用不到$扼倘；為什么呢确封？因?yàn)?code>webpack是最后會(huì)把代碼用閉包的方式打包，$對(duì)象并沒(méi)有掛載在window下再菊，helloWorld這個(gè)組件中并沒(méi)有引用jquery所以它自然是拿不到的爪喘，那么怎么能做到在main.js中一次引用，每個(gè)組件都能拿到呢纠拔？
c.
expose-loader將jquery暴露至全局
1) 安裝 expose-loader
npm i expose-loader -D
2) webpack.config.js（vue-cli 創(chuàng)建的項(xiàng)目可在 webpack.base.conf.js）
中配置當(dāng)引用 jquery 時(shí)使用 expose-loader
......
module: {
rules: [
//增加以下配置即可
{
test: require.resolve('jquery'),
loader: 'expose-loader?$'
},
.....
image.png
- 3
webpack插件法秉剑，給每個(gè)模塊注入$
webpack.config.js（vue-cli創(chuàng)建的項(xiàng)目可在webpack.base.conf.js）
中配置
引用webpack
const webpack = require('webpack')
配置插件
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
})
]
