第一種：普通html中使用jquery
將jQuer的檔案匯入到專案中，然後直接使用<script src="jQuery.js"></script>即可。
第二種：vue元件中使用jquery
1、安裝依賴
cnpm install jquery --save 或者 npm install jquery --save;
2、此處也有兩種方式
一、元件中直接使用jquery
二、使用全域性變數
2.1 元件中直接使用
我們想在哪個元件中使用jQuery庫，首先要使用如下命令引入jquery，然後就可以正常使用了
import $ from 'jquery'
比如，我們要在 App.vue元件中使用jQuery，例項程式碼如下：
<template>
<div id="app">
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'App',
components: {},
data: function () {
return {}
},
created:function(){
console.log($('#app'));
}
}
</script>
<style>
</style>
2.2 使用全域性變數
若每一個元件中都可以使用jquery，必須在每個元件中寫：import $ from 'jquery';
比較麻煩，所以使用全域性變數
1）webpack.base.conf.js檔案中引入
在專案中找到webpack.base.conf.js檔案，在開頭使用以下程式碼引入webpack，因為該檔案預設沒有引用。
let webpack = require('webpack')
2）在同檔案：webpack.base.conf.js中，找到module.exports中新增一段程式碼
// 新增程式碼
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],
3）避開eslint 檢查
修改根目錄下.eslintrc.js 檔案的env 節點，為env新增一個鍵值對 jquery: true 就可以了
env: {
// 原有
browser: true,
// 新增
jquery: true
}
4）重新啟動專案 npm run dev，可直接使用$
不需要再import 引用 jQuery 了，可以 直接使用$了
console.log($('選擇器')) ，你會發現成功使用jQuery獲取到了DOM
————————————————
版權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。
原文連結：https://blog.csdn.net/happyzhlb/article/details/133695795