vue jquery混用

1、在项目中使用jquery

第一步安装jquery依赖包

使用npm install jquery --save

第二步在程序中配置jquery

打开webpack.base.conf.js
在文件头部添加: var webpack = require('webpack') 引入webpack:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack')

 

在module.exports中增加jquery路径的解析:
'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')

module.exports = {
  context: path.resolve(__dirname, '../'),
  
 .....省略代码.....
 
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery')

    }
  },

 

完成这两步后在组件中就可以使用jquery了

<template>
    <div style="background-color:red">
        <p id="msg">hello world</p>
        <button @click="showClick">
            点击
        </button>
    </div>
</template>
<script>
import $ from 'jquery'
export default {
  methods: {
    showClick () {
      alert($('#msg').text())
    }
  }
}
</script>