vue 项目中使用 jquery

在 vue 项目中使用 jquery，具体步骤如下

 

1、npm 安装 jquery

命令如下，@ 后边指定安装的 jquery 版本

npm install jquery@3.2.1

不加 @ 会安装最新版本

npm install jquery

命令执行成功后，会在 package.json 文件中自动生成 "jquery": "^3.2.1",

 

2、在 webpack 中进行配置

找到 webpack.base.conf.js 文件，添加如下配置

首先引入 webpack（已经引入的不用再引）

const webpack = require('webpack')

 

其次，在 module.exports 中添加如下配置

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"    
    })
],

 

3、在 main.js 文件中引入 jquery

import $ from 'jquery'

至此，即可在项目中使用 jquery

 

4、测试

<template>
    <div>
        <button @click="test">测试jquery</button>
        <input type="text" id="t">
    </div>
</template>
<script>
export default {
    methods: {
        test (){
            alert($("#t").val())
        }
    }
}
</script>