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，因為要在線上環(huán)境上用 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');

發(fā)現(xiàn)報錯了，跟之前的一樣

那把 import './jquery.changeStyle'; 改成 import changeStyle from './jquery.changeStyle'; 試一下。

發(fā)現(xiàn)并沒有什么用

發(fā)現(xiàn)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 這個庫。

現(xiàn)在我們運行一下 npm run dev，效果出來了。

這個插件不止可以處理 jquery，還可以處理別的庫，等你慢慢用它吧。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論