vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問(wèn)題及解決
vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined
以免日后再次遇到忘記。
安裝JQuery
npm install --save jquery
統(tǒng)一webpack版本
不同版本處理方法可能不同,我們這里就統(tǒng)一一下webpack版本
npm uninstall webpack npm install webpack@^4.0.0 --save-dev
新建配置文件
新建一個(gè)文件夾,命名為vue.config.js,這個(gè)文件是與public和src文件同級(jí)之前的版本是需要在webpack.base.conf.js里修改,新的版本沒(méi)有這個(gè)文件,我們需要建立這個(gè)文件來(lái)配置。
我們需要將以下代碼加入我們的配置文件
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錯(cuò)誤筆記 Vue is not defined
吐槽:vue太坑了
事情的經(jīng)過(guò)
我想在vue的頁(yè)面中添加一個(gè)分部視圖(PartialView),點(diǎn)擊button能打開(kāi)一個(gè)分部視圖頁(yè)面
html代碼
<button v-on:click="create()"><span>創(chuàng)建數(shù)據(jù)</span></button>
js 代碼
然后點(diǎn)擊button,報(bào)錯(cuò) vue is not defined,如圖所示:
然后網(wǎng)上說(shuō) 是vue.js的引用問(wèn)題,我去檢查了下我的引用,沒(méi)毛?。?/p>
然后我把create()方法里的函數(shù)刪了,還是報(bào)錯(cuò),
所以,打開(kāi)新頁(yè)面的方法應(yīng)該沒(méi)出錯(cuò),可能是vue下影響了button
找到兩種解決方案
1:加上type=button:
2:給click事件加上阻止事件修飾符
原理沒(méi)懂,應(yīng)該跟vue有關(guān)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題
這篇文章主要介紹了vue?button的@click方法無(wú)效鉤子函數(shù)沒(méi)有執(zhí)行問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
idea竟然有一個(gè)神功能很多朋友都不是特別清楚,下面小編給大家?guī)?lái)了在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟,感興趣的朋友一起看看吧2021-10-10vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01vue實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件
這篇文章主要介紹了vue如何實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2021-01-01