2020-09-01

如何在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()
  ...
}