vue項目中怎么實現全局引入jquery

這篇文章主要介紹“vue項目中怎么實現全局引入jquery”，在日常操作中，相信很多人在vue項目中怎么實現全局引入jquery問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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'
    }),
    ...
  ]
}

到此，關于“vue項目中怎么實現全局引入jquery”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！