vue項目引入jquery庫的方法

vue項目引入jquery庫的方法
1首先在package.json裏的dependencies加入jquery

  "dependencies": {
    "axios": "^0.19.2",
    "element-ui": "^2.13.1",
    "jquery": "^3.5.1",
    "ol": "^5.2.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.2.0",
    "xlsx": "^0.16.0"
  },

2.在終端裏輸入npm install jquery

npm install jquery

3 在build/webpack.base.conf.js文件module.exports中添加plugins屬性如下代碼

const webpack = require('webpack')

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

4在main.js中引入jquery import $ from ‘jquery’

import $ from 'jquery'

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'

5在app.vue使用jquery獲取vue圖片logo

<div id="app">
<image src="logo.png"/>
</div>

export default {
   name : "App",
   mounted(){
        var src= $('#app>img').attr('src');
   }
}

6安裝jquery報錯處理方法
報錯問題描述

npm ERR! Unexpected token < in JSON at position 127336

解決辦法如下所示：

刪除根目錄下的package-lock.json一個或多個文件，
然後在npm install jquery依賴包名字，就會發現成功了。
不用擔心package-lock.json,在你安裝完依賴包後，它又會生成。

—the—end—