vue引入jquery时报错 $ is not defined的问题及解决

 更新时间:2022年09月07日 09:39:32   作者:沃特艾文儿~  
这篇文章主要介绍了vue引入jquery时报错 $ is not defined的问题及解决,具有很好的参考价值,希望对大家有所帮助。

vue引入jquery时报错 $ is not defined

以免日后再次遇到忘记。

安装JQuery

npm install --save jquery

统一webpack版本

不同版本处理方法可能不同,我们这里就统一一下webpack版本

npm uninstall webpack
npm install webpack@^4.0.0 --save-dev

新建配置文件

新建一个文件夹,命名为vue.config.js,这个文件是与public和src文件同级之前的版本是需要在webpack.base.conf.js里修改,新的版本没有这个文件,我们需要建立这个文件来配置。

我们需要将以下代码加入我们的配置文件

var webpack = require('webpack')

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

最终如下:

var webpack = require('webpack')


module.exports = {
    lintOnSave: false,
    devServer: { 
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    }
}

vue错误笔记 Vue is not defined

吐槽:vue太坑了

事情的经过

我想在vue的页面中添加一个分部视图(PartialView),点击button能打开一个分部视图页面

html代码

<button  v-on:click="create()"><span>创建数据</span></button>

js 代码

然后点击button,报错 vue is not defined,如图所示:

然后网上说 是vue.js的引用问题,我去检查了下我的引用,没毛病:

然后我把create()方法里的函数删了,还是报错,

所以,打开新页面的方法应该没出错,可能是vue下影响了button

找到两种解决方案

1:加上type=button:

2:给click事件加上阻止事件修饰符

原理没懂,应该跟vue有关

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Element-Plus实现动态渲染图标的示例代码

    Element-Plus实现动态渲染图标的示例代码

    在Element-Plus中,我们可以使用component标签来动态渲染组件,本文主要介绍了Element-Plus 实现动态渲染图标教程,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • vue resource发送请求的几种方式

    vue resource发送请求的几种方式

    这篇文章主要介绍了vue resource发送请求的几种方式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue中格式化时间过滤器代码实例

    vue中格式化时间过滤器代码实例

    这篇文章主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue大数据表格卡顿问题的完美解决方案

    vue大数据表格卡顿问题的完美解决方案

    这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 利用Vue3+Element-plus实现大文件分片上传组件

    利用Vue3+Element-plus实现大文件分片上传组件

    在开发中如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,下面这篇文章主要给大家介绍了关于利用Vue3+Element-plus实现大文件分片上传组件的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue项目展示pdf文件的方法实现

    vue项目展示pdf文件的方法实现

    本文主要介绍了vue项目展示pdf文件的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Element-UI中el-table如何合并相同单元格

    Element-UI中el-table如何合并相同单元格

    这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • 如何使用sm4js进行加密和国密sm4总结

    如何使用sm4js进行加密和国密sm4总结

    近期由于公司项目的需要开始研究国密SM4加密,下面这篇文章主要给大家介绍了关于如何使用sm4js进行加密和国密sm4的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • element-ui中dialog弹窗关闭按钮失效的解决

    element-ui中dialog弹窗关闭按钮失效的解决

    这篇文章主要介绍了element-ui中dialog弹窗关闭按钮失效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 关于vue中api统一管理的那些事

    关于vue中api统一管理的那些事

    最近在学习Vue教程,下面这篇文章主要给大家介绍了关于vue中api统一管理的那些事,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-04-04

最新评论