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

目录
  • vue引入jquery时报错 $ is not defined
    • 安装JQuery
    • 统一webpack版本
    • 新建配置文件
  • vue错误笔记 Vue 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有关

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何在vue 中引入使用jquery

    1.首先在配置文件中添加 cnpm install  下载jquery文件 2.在webpack配置文件中添加下面代码 3.接着在webpack.base.conf.js中module.exports的最后加入下面代码 4.最后在main.js中全局引入 5.引入完成以后重启项目,就可以在全局使用jquery了 以上就是如何在vue 中引入使用jquery的详细内容,更多关于vue 引入使用jquery的资料请关注我们其它相关文章!

  • Vue中引入第三方JS库的四种方式

    Vue中引入第三方JS库的四种方式

    目录 一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins,无需 import 全局可用 结论 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script

  • 解决vue项目报错webpackJsonp is not defined问题

    在vue单页面应用中,我们大概都会使用CommonsChunkPlugin这个插件. 传送门 CommonsChunkPlugin 但是在项目经过本地测试没有任何问题,打包上线后却会报错 webpackJsonp is not defined.这是因为公共文件必须在自己引用的js文件之前引用. 可以手动改文件引用,但是推荐以下解决办法: 找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin插件,添加如下配置即可 chunks: ['manifest',

  • Vue中正确使用jQuery的方法

    题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefined or no-undef '$' is not defined 假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面. 1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置 在项目根目录下的build目录

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

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

    目录 vue引入jquery时报错 $ is not defined 安装JQuery 统一webpack版本 新建配置文件 vue错误笔记 Vue is not defined 事情的经过 找到两种解决方案 vue引入jquery时报错 $ is not defined 以免日后再次遇到忘记. 安装JQuery npm install --save jquery 统一webpack版本 不同版本处理方法可能不同,我们这里就统一一下webpack版本 npm uninstall webpack

  • Vue引入jquery实现平滑滚动到指定位置

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵...根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话...我还是继续研究

  • vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错:Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’). 百度了很多办法都说是因为在vue3中引入了elementUi,vue3.0之后是不支持elementUi的,要使用element plus,但是因为我想用若依偷懒,所以必须得用elementUi,很多文章说是vue - V命令查看vu

  • vue项目中实现全局引入jquery

    vue项目中实现全局引入jquery

    目录 vue项目全局引入jquery vue引入jquery遇到的坑 引入 使用jquery 遇到的坑 解决办法 vue项目全局引入jquery 说明:在index.html直接用<script>标签引入,不会生效的,正确引入姿势如下: 1:打开package.json文件,手动在dependencies中加入如下代码: 2:运行cnpm install,这样就会引入版本为2.1.1的jquery作为依赖: 3:打开webpack.base.conf.js文件,对该文件进行两处修改,如下图:

  • vue-cli webpack 引入jquery的方法

    今天费了一下午的劲,终于在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf.js里加入 var webpack = require("webpack") 在module.exports的最后加入 plugins: [ new webpack.optimi

  • vue中如何引入jQuery和Bootstrap

    这两天学习了Vue.js ,所以,今天添加一点小笔记. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文件下)两个地方: 1:加入 var webpack=require('webpack'); 2 在module.exports的里面加入 plugins: [ new webpack.opt

  • 解决vue 引入子组件报错的问题

    错误信息: Do not use built-in or reserved HTML elements as component id: header 源码: <script> import header from "./components/header" import aside from "./components/aside" import footer from "./components/footer" export de

  • vue引入jq插件的实例讲解

    vue引入jq插件的实例讲解

    今天做官网,把unslider做成指令,但是一直提示$(el).unslider() no a function,一开始我想复杂了,后来在网上看了很多帖子,大多数都是修改webpack.base.config.js,仔细尝试,网上确实是对的,尝试过程中,提醒大家最好把这3个加全,比如unslider插件,(function(){})(window.jQuery) { jQuery: "jquery", "window.jQuery": "jquery&qu

  • 集成vue到jquery/bootstrap项目的方法

    说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现.现在,使用vue开发,集成vue到原先的项目中.不影响原先的框架.原来的打包方式是使用fis打包,集成vue之后,先用webpack打包,再用fis打包.互不影响. 1.由于原先使用jquery和bootstrap,所以package.json文件夹下面没有数据.使用vue的时候,需要的依赖全部放到package.json下,添加如下依赖: { "name&quo

  • 使vue实现jQuery调用的两种方法

    引言 如果说vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞.MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作.而vue的渐进式开发(逐步引用组件,按需引入),也让许多新手前端开发人员逐步绕过对jQuery的学习.jQuery需要记忆的内容颇多,这也让jQuery变得不那么受新入行开发者喜欢. 在前端工程化的需求没有普及的时候,许多公司使用的是后端渲染技术,为了能够实现友好的前端交互效果,需要写好大量的jQuery.JavaScript和CSS,

随机推荐