vue jquery混用

Posted 2021-01-21 judyh

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‘)

 1 module.exports = {
 2   context: path.resolve(__dirname, ‘../‘),
 3   
 4  .....省略代码.....
 5  
 6   resolve: {
 7     extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
 8     alias: {
 9       ‘vue$‘: ‘vue/dist/vue.esm.js‘,
10       ‘@‘: resolve(‘src‘),
11       ‘jquery‘: path.resolve(__dirname,‘../node_modules/jquery/src/jquery‘)
12 
13     }
14   },

 

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

 1 <template>
 2     <div style="background-color:red">
 3         <p id="msg">hello world</p>
 4         <button @click="showClick">
 5             点击
 6         </button>
 7     </div>
 8 </template>
 9 <script>
10 import $ from ‘jquery‘
11 export default {
12   methods: {
13     showClick () {
14       alert($(‘#msg‘).text())
15     }
16   }
17 }
18 </script>