如何在vue3.0 vue-cli 3.x中使用jquery

因爲項目需求要使用jquery，結果各類引用都不濟於事。

最後在網上找到了答案，現把它記錄一下，給有須要者。

首先下載 jquery。

cnpm install  jquery --save-dev

方案一：

而後在main.js中引入jquery。

import Vue from 'vue'
import $ from 'jquery'  //加上這句話
import App from './App.vue'
 
Vue.config.productionTip = false   
Vue.prototype.$ = $;   // 固然還有這句話 給vue原型上添加 $ 
new Vue({
  render: h => h(App),
}).$mount('#app'

在使用的時候

mounted() {
  console.log(this.$('#wrapper'));      
}

這樣使用的時候會有一些麻煩，好比在一個函數內部使用的時候，this的指向是個問題。

方案二：

這個就比較簡單粗暴了，直接在須要使用jquery的組建中

<script>
import $ from 'jquery'
export default {
  // $("nav").click()
  ...
}

==============================
若是以上還解決不了試試以下：

方式一 全局使用

1）main.js中引入

1 2 3

// jquery import $ from 'jquery' Vue.prototype.$ = $;

2）更改vue.config.js

1 2 3 4 5 6 7 8 9 10 11

const webpack = require('webpack')   configureWebpack: {     plugins: [         new webpack.ProvidePlugin({         $: 'jquery',         jQuery: 'jquery',         'windows.jQuery': 'jquery'         })     ] }

3）重要！！！.eslintrc.js中添加節點，不然編譯會報錯

1	jquery: true

 方式二 組件中使用（直接引用便可）

1	import $ from 'jquery'

此外：jquery要使用的話最先要在 mounted中

做者： 王春天
關於做者：
  大連天翼信息科技有限公司 技術總監。
  SNF快速開發平臺 創始人。應用平臺架構師、IT規劃諮詢專家、業務流程設計專家。
  專一於快速開發平臺的開發、代碼生成器。同時專一於微軟平臺項目架構、管理和企業解決方案，多年項目開發與管理經驗，精通DotNet系列技術Vue、.NetCore、MVC、Webapi、C#、WinForm等，DB（SqlServer、Oracle等）技術，移動端開發。熟悉Java、VB及PB開發語言。在面向對象、面向服務以及數據庫領域有必定的造詣。現從事項目實施、開發、架構等工做。並從事用友軟件產品U八、U九、PLM 客開工做。
若有問題或建議，請多多賜教！
本文版權歸做者和CNBLOGS博客共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，若有問題，能夠經過郵箱或QQ 聯繫我，很是感謝。