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>vue jquery混用
原文地址：https://www.cnblogs.com/judyh/p/9979514.html