vue項目中實現全局引入jquery

Posted on by

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。

推薦閱讀：