您好,登錄后才能下訂單哦!
前言
在使用webpack作為構(gòu)建工具,開發(fā) vue項(xiàng)目的時(shí)候,難免會(huì)用到 jquery這種第三方插件(畢竟都是從用jquery過來的),那么怎么引用呢?接下來我來說三種方法。
1 html 模板文件引用法,這種方法最直接也是我們最熟悉,直接在項(xiàng)目中的網(wǎng)頁模板文件中加入jquery的引用即可
a.引用
b.使用
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.$);
說明 此時(shí)我們會(huì)發(fā)現(xiàn),main.js中我們引用了 jquery,$符號(hào)我們可以正常使用,但 window.$卻不能,而且 helloWorld這個(gè)組件中也引用不到$;為什么呢?因?yàn)閣ebpack是最后會(huì)把代碼用閉包的方式打包,$對(duì)象并沒有掛載在window下,helloWorld這個(gè)組件中并沒有引用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?$' }, .....
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", }) ]
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。