vue 项目中使用 jquery

悟世君子

于 2019-06-05 12:17:36 发布

阅读量2.8k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wsjzzcbq/article/details/90897714

版权

vue 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成jQuery，包括通过npm安装指定版本的jQuery，配置webpack以全局提供jQuery，以及在main.js中导入jQuery确保项目可用。通过实例演示了jQuery在Vue中的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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>