引言

如果說vue是前端工程化使用較多的骨架，那么JavaScript就是我們的前端的細胞。MVVM模式讓我們體驗到前端開發的便攜，無需再過多的考慮DOM的操作。而vue的漸進式開發（逐步引用組件，按需引入），也讓許多新手前端開發人員逐步繞過對jQuery的學習。jQuery需要記憶的內容頗多，這也讓jQuery變得不那么受新入行開發者喜歡。

 在前端工程化的需求沒有普及的時候，許多公司使用的是后端渲染技術，為了能夠實現友好的前端交互效果，需要寫好大量的jQuery、JavaScript和CSS，所以到目前還是有大量的公司維護和使用jQuery。

 前端工程化讓許多人看到了開發的效率，但公司還是需要維護產品線，所以解決jQuery在vue的使用是每位前端工程師的必經之路，畢竟從零造輪子是一個非常痛苦耗時的事。

 今天我們提供兩種方法引用，切記二選其一。

方法一：在webpage中引入JQ（推薦）

在vue中安裝jQuery組件

老鄉已經默認你的已經使用vue-cli腳手架進行操作了。至于如何使用vue-cli，可以進入vue的官網中查看相關開發文檔。

1.在項目終端中輸入npm install jquery -save-dev
2.在build文件夾中找到webpack.base.conf.js文件，打開，在第一行添加

var webpack = require('webpack')

效果：

// webpack.base.conf.jsvar webpack = require('webpack')'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')

3.在同樣這個文件中（webpack.base.conf.js）的module.exports里添加：

plugins: [ new webpack.ProvidePlugin({  $:"jquery",  jQuery:"jquery",  "windows.jQuery":"jquery" }) ],

1.在入口文件main.js中輸入：

import $ from 'jQuery'

提示：這里無需再下面注冊，有些IDE會提示標紅，無需處理。

查看執行效果

在app.vue中寫一個案例

這種方法是在開發中比較看好的方法，方便易用。同樣，也有不希望在所有的頁面都引用到jQuery，這樣我們就會考慮到按需引用。

方法二：按需引用jQuery方法

這種方法只在單頁面中使用jQuery時進行操作。這種方法適用于極個別的交互頁面中。

jQuery的安裝和配置

1.和“方法一”中的操作一致，在終端中輸入

npm install jquery --save-dev

2.找到build中webpack.base.conf文件

// webpack.base.confmodule.exports = { resolve: {  extensions: ['.js', '.vue', '.json'],  alias: {   'vue$': 'vue/dist/vue.esm.js',   '@': resolve('src'),   'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')  } }}

jq的引用

在APP.vue中或者需要使用的地方

<template> <div>  <p class="jj">請點擊我</p> </div></template><script>import $ from 'jquery'export default { name: 'app', mounted () {  $('.jj').click(function(){   alert(1)  }) }}</script>

結語

方法千萬條，道理第一條。本文是我在開發中遇到jq無法引入后查閱資料后整理的方法。但不論是什么方法，我們最終的目標都是要完成項目的需求。技術的革新速度和時代的發展飛快，jQuery也在不斷發展，許多人覺得這類語言過于復雜多變，但這就如同學習python一樣，開始“學習一時爽，一直學習一直爽”，但到達技術瓶頸時，你會發現總會讓人很棘手。我就多次遇到vue處理的問題而就迫使我去閱讀底層技術。所以，學無止境，有效努力，持續輸出。

以上所述是小編給大家介紹的使vue實現jQuery調用的兩種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！