兩種方法使vue實現jQuery調用

引言

若是說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.js
   var 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.conf
module.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處理的問題而就迫使我去閱讀底層技術。因此，學無止境，有效努力，持續輸出。