vue項(xiàng)目中怎么實(shí)現(xiàn)全局引入jquery

這篇文章主要介紹“vue項(xiàng)目中怎么實(shí)現(xiàn)全局引入jquery”，在日常操作中，相信很多人在vue項(xiàng)目中怎么實(shí)現(xiàn)全局引入jquery問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue項(xiàng)目中怎么實(shí)現(xiàn)全局引入jquery”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

vue項(xiàng)目全局引入jquery

說(shuō)明：在index.html直接用<script>標(biāo)簽引入，不會(huì)生效的，正確引入姿勢(shì)如下：

1：打開(kāi)package.json文件，手動(dòng)在dependencies中加入如下代碼；

2：運(yùn)行cnpm install，這樣就會(huì)引入版本為2.1.1的jquery作為依賴；

3：打開(kāi)webpack.base.conf.js文件，對(duì)該文件進(jìn)行兩處修改，如下圖：

4：在需要的頁(yè)面（如index.vue）中添加：import $ from 'jquery'，即正確引入jquery，可以在需要的地方使用jquery；

5：重新運(yùn)行項(xiàng)目（npm run dev）即可；

vue引入jquery遇到的坑

引入

$ npm install --save jquery

# 注意這里是 --save 而不是 --save-dev，因?yàn)橐诰€上環(huán)境上用 jquery

使用jquery

在src/app.js里來(lái)引用一下

import 'jquery';
 
// 在 html 中應(yīng)該有 id 為 "hello" 的元素吧，這點(diǎn)相信大家都懂的。
// 這一行作用是把元素的內(nèi)容改成 "change to other text"
$("#hello").text('change to other text');

但是竟然報(bào)錯(cuò)了

好像是引入錯(cuò)誤了，嘗試一下以上方法可不可行 

import $ from 'jquery';
 
$("#hello").text('change to other text');

事實(shí)證明是可以的 

遇到的坑

當(dāng)引入下方的一個(gè)插件的時(shí)候

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)報(bào)錯(cuò)了，跟之前的一樣

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

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

發(fā)現(xiàn)src/jquery.changeStyle.js 文件引用了 jquery 這個(gè)插件，可是外面 src/app.js 卻不知道。

我們來(lái)改一下 src/jquery.changeStyle.js 文件的內(nèi)容。

import $ from 'jquery';
 
$.fn.changeStyle = function(colorStr){
  this.css("color", colorStr);
}

效果出來(lái)了，這樣是可以的。

但是有一個(gè)問(wèn)題啊，上面的 jquery 插件是我們自己隨意寫的，我們想怎么改都可以，如果是第三方的呢，就是說(shuō)你有可能從網(wǎng)上下載一個(gè)別人寫好的。

這個(gè)時(shí)候，你總不能下載后，再來(lái)改吧。

我們?cè)趺醋瞿兀?/p>

解決辦法

這個(gè)時(shí)候要引入 webpack 的一個(gè)插件：ProvidePlugin。

這個(gè)插件可以有這樣的效果。

不必通過(guò) import/require 使用模塊

把剛才的 src/jquery.changeStyle.js 還原一下。

src/jquery.changeStyle.js

接下來(lái)：在webpack.config.js

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    ...
  ]
}

到此，關(guān)于“vue項(xiàng)目中怎么實(shí)現(xiàn)全局引入jquery”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！