最近盆友工作中遇到了vue中要引入jquery的情况 今天试着引了一下 步骤如下:
- 创建vue项目 npm vue-cli vue init webpack vuejquery(指的是项目名字)
- 下载 jquery npm i jquery -S
- webpack.base.cof.js中配置
- main.js中引入 import $ from “jquery”
- App.vue中实验 (不建议在App.vue中写,这里只是实验下,具体情况根据你的项目来说)
- 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 就可以了