vue項目中實現全局引入jquery
vue項目全局引入jquery
說明:在index.html直接用<script>標簽引入,不會生效的,正確引入姿勢如下:
1:打開package.json文件,手動在dependencies中加入如下代碼;
2:運行cnpm install,這樣就會引入版本為2.1.1的jquery作為依賴;
3:打開webpack.base.conf.js文件,對該文件進行兩處修改,如下圖:
4:在需要的頁面(如index.vue)中添加:import $ from 'jquery',即正確引入jquery,可以在需要的地方使用jquery;
5:重新運行項目(npm run dev)即可;
vue引入jquery遇到的坑
引入
$ npm install --save jquery
# 註意這裡是 –save 而不是 –save-dev,因為要在線上環境上用 jquery
使用jquery
在src/app.js裡來引用一下
import 'jquery'; // 在 html 中應該有 id 為 "hello" 的元素吧,這點相信大傢都懂的。 // 這一行作用是把元素的內容改成 "change to other text" $("#hello").text('change to other text');
但是竟然報錯瞭
好像是引入錯誤瞭,嘗試一下以上方法可不可行
import $ from 'jquery'; $("#hello").text('change to other text');
事實證明是可以的
遇到的坑
當引入下方的一個插件的時候
src/jquery.changeStyle.js
$.fn.changeStyle = function(colorStr){ this.css("color", colorStr); }
我們引入src/app.js裡
import $ from 'jquery'; import './jquery.changeStyle'; $("#hello").text('change to other text'); // 把元素改成紫色 $("#hello").changeStyle('pink');
發現報錯瞭,跟之前的一樣
那把 import './jquery.changeStyle'; 改成 import changeStyle from './jquery.changeStyle'; 試一下。
發現並沒有什麼用
發現src/jquery.changeStyle.js 文件引用瞭 jquery 這個插件,可是外面 src/app.js 卻不知道。
我們來改一下 src/jquery.changeStyle.js 文件的內容。
import $ from 'jquery'; $.fn.changeStyle = function(colorStr){ this.css("color", colorStr); }
效果出來瞭,這樣是可以的。
但是有一個問題啊,上面的 jquery 插件是我們自己隨意寫的,我們想怎麼改都可以,如果是第三方的呢,就是說你有可能從網上下載一個別人寫好的。
這個時候,你總不能下載後,再來改吧。
我們怎麼做呢?
解決辦法
這個時候要引入 webpack 的一個插件:ProvidePlugin。
這個插件可以有這樣的效果。
不必通過 import/require 使用模塊
把剛才的 src/jquery.changeStyle.js 還原一下。
src/jquery.changeStyle.js
接下來:在webpack.config.js
module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), ... ] }
什麼意思呢?很容易理解,以後要遇到或處理 jQuery 或 $ 都會去自動加載 jquery 這個庫。
現在我們運行一下 npm run dev,效果出來瞭。
這個插件不止可以處理 jquery,還可以處理別的庫,等你慢慢用它吧。
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue cli3配置image-webpack-loader方式
- NodeJs使用webpack打包項目的方法詳解
- webpack搭建vue環境時報錯異常解決
- webpack模塊化的原理解析
- 淺談Webpack是如何打包CommonJS的