vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問題及解決
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里修改，新的版本沒有這個(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)過
我想在vue的頁(yè)面中添加一個(gè)分部視圖（PartialView），點(diǎn)擊button能打開一個(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)上說 是vue.js的引用問題，我去檢查了下我的引用，沒毛?。?/p>
然后我把create()方法里的函數(shù)刪了，還是報(bào)錯(cuò)，
所以，打開新頁(yè)面的方法應(yīng)該沒出錯(cuò)，可能是vue下影響了button
找到兩種解決方案
1：加上type=button:
2:給click事件加上阻止事件修飾符
原理沒懂，應(yīng)該跟vue有關(guān)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動(dòng)態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例
這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-04-04
uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來(lái))
這篇文章主要介紹了uniapp 小程序和app map地圖上顯示多個(gè)酷炫動(dòng)態(tài)的標(biāo)點(diǎn)效果(頭像后端傳過來(lái)),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
xss的攻擊方式是發(fā)生在用戶使用瀏覽器時(shí)候運(yùn)行,通過嵌入腳本竊取用戶信息,本文主要介紹了vue如何防范XSS攻擊的一些方法,感興趣的可以了解一下2024-04-04
組件的銷毀意味著從 DOM 中移除該組件,并清除與之相關(guān)的所有事件監(jiān)聽器和子組件,本文主要介紹了vue3組件銷毀的具體實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09