前言
文章內(nèi)容覆蓋范圍,芝麻綠豆的破問題都有,不止于vue;
給出的是方案,但不是手把手一字一句的給你說十萬個(gè)為什么!
有三類人不適合此篇文章:
"喜歡站在道德制高點(diǎn)的圣母婊" -- 適合去教堂
"無理取鬧的鍵盤俠" -- 國際新聞版塊歡迎你去
"有一定基礎(chǔ)但又喜歡逼逼的人"
得得得,老子知道你厲害了,你好牛逼,這些問題那么簡單,都是小白看的
這種傻瓜文,簡直浪費(fèi)老子的時(shí)間!
對(duì)于以上三類人,走吧,這里不是你來裝逼的地方.
你們也不值得看小編花那么多時(shí)間去匯總的水文.
學(xué)習(xí)一些新東西.若是有人給匯總那么多問題(指明方向和一定的解決法子).
不用讓我去各種搜索,匯總,總結(jié),學(xué)習(xí)時(shí)間起碼可以節(jié)省一半!
文章匯總來自群里高頻詢問的xxx及給出不靠譜的解決方案
曼氛，
學(xué)習(xí)交流前端方面的技術(shù)刊懈，打算深入了解這個(gè)行業(yè)的朋友绪钥，可以加下小編的前端學(xué)習(xí)裙 330336289 邀請(qǐng)碼（寂靜），不管你是小白還是大牛凿叠，小編我都?xì)g迎，不定期更新最新的教程和學(xué)習(xí)方法嚼吞，包括小編自己整理的一份2018最新的前端資料和0基礎(chǔ)入門教程盒件，歡迎初學(xué)和進(jìn)階中的小伙伴。每天晚上20:00都有大咖開直播給大家分享前端學(xué)習(xí)知識(shí)和路線方法誊薄，歡迎小伙伴可以加入交流履恩。
問題匯總
Q:安裝超時(shí)(install timeout)
方案有這么些:
cnpm : 國內(nèi)對(duì)npm的鏡像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org
// cnpm 的大多命令跟 npm 的是一致的,比如安裝,卸載這些
yarn 和 npm 改源大法
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org
Q:安裝一些需要編譯的包:提示沒有安裝python、build失敗等因?yàn)橐恍?npm 的包安裝需要編譯的環(huán)境,mac 和 linux 都還好,大多都齊全window 用戶依賴 visual studio 的一些庫和python 2+,
windows的小伙伴都裝上:
windows-build-tools
python 2.x
Q:can't not find 'xxModule' - 找不到某些依賴或者模塊
這種情況一般報(bào)錯(cuò)信息可以看到是哪個(gè)包拋出的信息.
一般卸載這個(gè)模塊,安裝重新安裝下即可.
Q:data functions should return an object
這個(gè)問題是 Vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對(duì)象;如下
請(qǐng)點(diǎn)擊此處輸入圖片描述
為什么要 return 一個(gè)數(shù)據(jù)對(duì)象呢?
官方解釋如下: data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)呢蔫，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例切心。如果 data 仍然是一個(gè)純粹的對(duì)象飒筑，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！
簡言之,組件復(fù)用下,不會(huì)造成數(shù)據(jù)同時(shí)指向一處,造出牽一發(fā)而動(dòng)全身的破問題...
Q:我給組件內(nèi)的原生控件添加事件,怎么不生效了!!!
Q:我用了 axios , 為什么 IE 瀏覽器不識(shí)別(IE9+)
那是因?yàn)?IE 整個(gè)家族都不支持 promise, 解決方案:
npm install es6-promise
// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();
Q:我在函數(shù)內(nèi)用了this.xxx=,為什么拋出Cannot set property 'xxx' of undefined;這又是this的套路了..this是和當(dāng)前運(yùn)行的上下文綁定的...
一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子.
簡單點(diǎn)說:"最外層的上下文就是 window,vue內(nèi)則是 Vue 對(duì)象而不是實(shí)例!";
解決方案:
暫存法: 函數(shù)內(nèi)先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數(shù): 會(huì)強(qiáng)行關(guān)聯(lián)當(dāng)前運(yùn)行區(qū)域?yàn)?this 的上下文;
Q:我看一些Vue教程有這么些寫法,是什么意思@click.prevent,v-demo.a.b;就拿這兩個(gè)例子來說吧.
@click.prevent : 事件+修飾符 , 作用就是點(diǎn)擊但又阻止默認(rèn)行為
v-demo.a.b: 自定義指令+修飾符. 具體看你什么指令了,修飾符的作用大多是給事件增加一些確切的拓展功能
比如阻止事件冒泡,阻止默認(rèn)行為,訪問到原生控件,結(jié)合鍵盤快捷鍵等等
可以自定義修飾符么?也是可以的..
可以通過全局 config.keyCodes 對(duì)象自定義鍵值修飾符別名：
Q:為什么我的引入的小圖片渲染出來卻是 data:image/png;base64xxxxxxxx這個(gè)是 webpack 里面的對(duì)應(yīng)插件處理的.
對(duì)于小于多少 K 以下的圖片(規(guī)定的格式)直接轉(zhuǎn)為 base64格式渲染;
具體配置在webpack.base.conf.js里面的 rules里面的 url-loader
這樣做的好處:在網(wǎng)速不好的時(shí)候先于內(nèi)容加載和減少http的請(qǐng)求次數(shù)來減少網(wǎng)站服務(wù)器的負(fù)擔(dān)
Q:Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
大體就是說,單組件渲染 DOM 區(qū)域必須要有一個(gè)根元素,不能出現(xiàn)同級(jí)元素.可以用v-if和v-else-if指令來控制其他元素達(dá)到并存的狀態(tài)
換個(gè)直白的解釋,就是有一個(gè)唯一的父類,包裹者;
比如一個(gè) div(父包含塊) 內(nèi)部多少個(gè)同級(jí)或者嵌套都行,但是最外層元素不能出現(xiàn)同級(jí)元素!!!!
Q:跨域問題怎么破!比如No 'Access-Control-Allow-Origin' header is present on the requested resource.
這種問題老生常談了,我就不細(xì)說了..大體說一下;
1: CORS , 前后端都要對(duì)應(yīng)去配置,IE10+
2: nginx 反向代理,一勞永逸 <-- 線上環(huán)境可以用這個(gè)
線下開發(fā)模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable這么個(gè)玩意,也可以做接口反向代理
請(qǐng)點(diǎn)擊此處輸入圖片描述
當(dāng)然還有依舊堅(jiān)挺的jsonp大法!不過局限性比較多,比較適合一些特殊的信息獲取!
Q:我需要遍歷的數(shù)組值更新了,值也賦值了,為什么視圖不更新!!!
那是因?yàn)橛芯窒扌园?官方文檔也說的很清楚,只有一些魔改的之后的方法提供跟原生一樣的使用姿勢(shì)(卻又可以觸發(fā)視圖更新);
一般我們更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);
Q:為什么我的組件間的樣式不能繼承或者覆寫啊!!!單組件開發(fā)模式下,請(qǐng)確認(rèn)是否開啟了 CSS模塊化功能!!
也就是scoped(vue-cli 里面配置了,只要加入這個(gè)屬性就自動(dòng)啟用)
為什么不能繼承或者覆寫呢,那時(shí)因?yàn)槊總€(gè)類或者 id 乃至標(biāo)簽都會(huì)給自動(dòng)在css后面添加hash!
比如
// 寫的時(shí)候是這個(gè)
.trangle{}
// 編譯過后,加上了 hash
.trangle[data-v-1ec35ffc]{}
這些都是在 css-loader 里面配置!!!
Q:路由模式改為history后,除了首次啟動(dòng)首頁沒報(bào)錯(cuò),刷新訪問路由都報(bào)錯(cuò)!
必須給對(duì)應(yīng)的服務(wù)端配置查詢的主頁面..也可以認(rèn)為是主路由入口的引導(dǎo)
官方文檔也有,為毛總有人不喜歡去看文檔,總喜歡做伸手黨....wtf
Q:我想攔截頁面,或者在頁面進(jìn)來之前做一些事情,可以么?
Of course !!
各種路由器的鉤子!!
當(dāng)然,記憶滾動(dòng)的位置也可以做到,詳情翻翻里面的文檔
結(jié)語
問題匯總分三部分發(fā)绽昏，未完待續(xù)协屡，關(guān)注我后續(xù)補(bǔ)上.
小伙伴們也可以留言補(bǔ)充,我會(huì)及時(shí)跟進(jìn)....
不過現(xiàn)在的新人好浮躁,一言不合就做伸手黨...不愿花時(shí)間去折騰.無解.....
請(qǐng)把這篇文章分享給正在學(xué)習(xí)前端的朋友，希望該篇文章可以幫到一些小伙伴節(jié)省時(shí)間全谤，加快開發(fā)肤晓。
最后祝所有程序員都能夠走上人生巔峰，讓代碼將夢(mèng)想照進(jìn)現(xiàn)實(shí)认然，有不懂的問題可以隨時(shí)問我补憾，工作不忙的時(shí)候希望可以給大家解惑。
