vue中引入jquery的具体操作

最近盆友工作中遇到了vue中要引入jquery的情况 今天试着引了一下 步骤如下:

1. 创建vue项目 npm vue-cli vue init webpack vuejquery(指的是项目名字)
2. 下载 jquery npm i jquery -S
3. webpack.base.cof.js中配置
4. main.js中引入 import $ from “jquery”
5. App.vue中实验 （不建议在App.vue中写，这里只是实验下，具体情况根据你的项目来说）
6. npm run dev 起一下本地服务 看一下效果

接下来就是具体步骤的代码 从步骤3 开始：

找到 webpack.base.cof.js 文件 操作如下：

// 首先需要引入 webpack 因为下面要用到
   const webapck = require('webpack')
// 在 module.exports 中配置
	plugins: [
	    new webapck.ProvidePlugin({
	      $:'jquery',
	      jQuery: 'jquery',
	      jquery:'jquery',
	      'windows.jQuery': 'jquery'
	    })
	  ]

步骤 4
找到mian.js 文件 操作如下：

import  $ from 'jquery'

步骤 5
找到 App.vue 文件 操作如下：

<template>
  <div id="app">
    <p class="fade">点击我渐入渐出</p>
    <p class='al'>点击我弹框</p>
    <p @click='vueclik'>我是vue的点击</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    vueclik () {
      alert('我是vue的事件哦')
    }
  },
  mounted () {
    $(function () {
      $('.fade').click(() => {
        $('p').eq(0).fadeOut(1000).fadeIn(2000)
      })
      $('.al').click(() => {
        alert('我是弹弹框')
      })
    })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤 6
npm run dev
最后发现 终端报错了 下面解决一下 报错问题

1.报错 ‘$’ is defined but never used 这是main.js报错了 解决方法 如下：

new Vue({
  el: '#app',
  router,
  $, //  把$挂载一下 
  components: { App },
  template: '<App/>'
})

另外还有一种方法是把webpack.base.conf.js中的 …(config.dev.useEslint ?[createLintingRule()] : []), 这段代码注释掉
但是这样做了会有一个问题 就是发现你写的代码不规范了 eslint不会报错了 所以个人觉得还是第一种方法好些
2.报错 ‘$’ is not defined 这是App.vue中的报错 解决方法 如下：

// 找到.eslintrc文件  配置下 jquery就可以了
env: {
    browser: true,
    jquery: true
  },

最后 npm run dev 就可以了