vue 项目中使用 jquery

╰+攻爆jí腚メ 2022-01-22 04:55 690阅读 0赞

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

**1、npm 安装 jquery**

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

npm install jquery@3.2.1

不加 @ 会安装最新版本

npm install jquery

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

**2、在 webpack 中进行配置**

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

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

const webpack = require('webpack')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2][]

## ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: /images/20220122/cce5f441c9084037ac76acc9273670fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 1]: /images/20220122/0f1014fb04834c79b8a8f902e5f4e1cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70 2]: /images/20220122/d5e5218b0d5142e7a3372ae8a2a36338.png