在vue-cli中使用jquery

望屿

于 2022-01-08 18:57:06 发布

阅读量528

点赞数

分类专栏：开发过程的bug记录文章标签： vue.js jquery javascript

本文链接：https://blog.youkuaiyun.com/darabiuz/article/details/122384452

版权

开发过程的bug记录专栏收录该内容

17 篇文章

订阅专栏

本文指导如何在Vue CLI环境中导入并使用jQuery，包括修改vue.config.js、.eslintrc.js文件，以及在main.js中引入jQuery，并在app.vue组件中进行测试验证。

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

1.导入jquery

输入命令cnpm install jquery --save
查看package.json是否安装成功

2.修改vue.config.js

添加以下代码语句

const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
            })
        ]
    }
}

3.修改.eslintrc.js

在env里加入jquery:true

4.在main.js文件里引入

import $ from 'jquery' //加上这句话
Vue.prototype.$ = $; // 给vue原型上添加 $
在这里插入图片描述

5.测试使用

我在app.vue里进行测试
在这里插入图片描述
测试成功：

在这里插入图片描述