Q1：安(an)裝(zhuang)超(chao)時(install timeout)

　　方案有這么些:

　　cnpm : 國內對npm的鏡(jing)像版本

　　/*

　　cnpm website: //npm.taobao.org/

　　*/

　　npm install -g cnpm --registry=
//registry.npm.taobao.org

　　// cnpm 的(de)大多命(ming)令跟 npm 的(de)是一(yi)致(zhi)的(de),比(bi)如(ru)安裝,卸載(zai)這些

　　yarn 和 npm 改源大法

　　//使用 nrm 模塊 : www.npmjs.com/package/nrm

　　npm config : npm config set registry
//registry.npm.taobao.org

　　yarn config : yarn config set registry
//registry.npm.taobao.org

　　Q2：安裝一些(xie)需要編譯的包:提示沒有安裝python、build失(shi)敗(bai)等

　　因為一些 npm 的包(bao)安裝需要編譯的環境,mac 和(he) linux 都(dou)(dou)還(huan)好(hao),大多都(dou)(dou)齊全 window 用戶依賴 visual studio 的一些庫和(he)python 2+, windows的小伙伴(ban)都(dou)(dou)裝上: windows-build-tools python 2.x

　　Q3：can’t not find ‘xxModule’ - 找不到(dao)某些依賴或(huo)者模(mo)塊

　　這種情況一般報錯信息可以看(kan)到是(shi)哪個包拋出(chu)的(de)信息.，一般卸載這個模塊,安(an)裝重新安(an)裝下即可.

　　Q4：data functions should return an object

　　這(zhe)個問題是 vue 實例內(nei),單組件的data必須(xu)返回一個對象;如下(xia)

　　export default {

　　 name: 'page-router-view',

　　 data () {

　　 return {

　　 tabs: [

　　 {

　　 title: '財務信息',

　　 url: '/userinfo'

　　 },

　　 {

　　 title: '帳號信(xin)息',

　　 url: '/userinfo/base'

　　 }

　　 ]

　　 }

　　 }

　　}

　　為(wei)什么(me)要(yao) return 一(yi)個數(shu)據對(dui)(dui)(dui)象呢? 官方解釋如(ru)下: data 必須聲明為(wei)返回一(yi)個初始(shi)數(shu)據對(dui)(dui)(dui)象的函數(shu)，因為(wei)組(zu)件(jian)可能被用來創建多個實例。如(ru)果 data 仍然是一(yi)個純粹的對(dui)(dui)(dui)象，則所(suo)有的實例將共享(xiang)引(yin)用同(tong)一(yi)個數(shu)據對(dui)(dui)(dui)象！簡言(yan)之,組(zu)件(jian)復用下,不會(hui)造成數(shu)據同(tong)時(shi)指向一(yi)處,造出牽(qian)一(yi)發而動全身的破問題...

　　Q5：我給組件內的原生控件添加事件,怎么不生效(xiao)了(le)!!!

　　 {{item.menuName}}

　　 {{item.menuName}}

　　Q6：我用了 axios , 為什么(me) IE 瀏覽器(qi)不識別(IE9+)

　　那是因為 IE 整(zheng)個家族都不支持 promise, 解(jie)決方案:

　　npm install es6-promise

　　// 在 main.js 引入(ru)即(ji)可(ke)

　　// ES6的polyfill

　　require("es6-promise").polyfill();

　　Q7：我在(zai)函數(shu)內用了(le)this.xxx=,為什么拋(pao)出Cannot set property ‘xxx’ of undefined;

　　這(zhe)又是this的(de)套路了..this是和當前運行的(de)上下文綁定的(de)...

　　一般(ban)你在axios或者其他(ta) promise , 或者setInterval 這(zhe)些默認都是指向最外層的全(quan)局(ju)鉤子.

　　簡單點(dian)說:"最外層的上下文就是(shi) window,vue內則(ze)是(shi) Vue 對象而不是(shi)實例!";

　　解決方案:

　　暫存法: 函數內先緩存 this , let that = this;(let是 es6, es5用 var)

　　箭(jian)頭函數: 會強行關聯當前運行區域為 this 的上(shang)下文;

　　Q8：我(wo)看(kan)一些Vue教程有這么些寫(xie)法(fa),是(shi)什么意思@click.prevent,v-demo.a.b;

　　就(jiu)拿這(zhe)兩個(ge)例子來說吧.

　　@click.prevent : 事(shi)件+修(xiu)飾符 , 作用(yong)就是點擊但(dan)又阻(zu)止默認行為。

　　v-demo.a.b: 自定義指令(ling)(ling)+修(xiu)(xiu)飾(shi)符. 具體看(kan)你(ni)什么指令(ling)(ling)了,修(xiu)(xiu)飾(shi)符的作用大多(duo)是給事(shi)件增加一(yi)些(xie)確(que)切的拓展功能(neng)，比如阻止事(shi)件冒泡,阻止默認行為,訪問到原生控件,結合鍵盤快捷鍵等(deng)等(deng) 。

　　可以自定義(yi)修飾符(fu)么?也是(shi)可以的(de)。可以通過全局 config.keyCodes 對象自定義(yi)鍵值修飾符(fu)別名(ming)：

　　Q9：為什(shen)么我的引入的小圖片渲染(ran)出來卻是 data:image/png;base64xxxxxxxx

　　這個是 webpack 里(li)面(mian)的(de)對應插件處理的(de)，對于小于多少(shao) K 以下的(de)圖(tu)片(規定(ding)的(de)格(ge)式)直接轉為(wei) base64格(ge)式渲染;

　　具(ju)體(ti)配(pei)置在webpack.base.conf.js里面的(de)rules里面的(de) url-loader，這(zhe)樣做的(de)好(hao)處:在網速不好(hao)的(de)時候先于內(nei)容加載和減(jian)少http的(de)請求次(ci)數來減(jian)少網站服務(wu)器的(de)負擔。

　　Q10：Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

　　大體就是(shi)說,單組件渲染 DOM 區域必須要有一個根元(yuan)素,不能出現同級元(yuan)素. 可以用v-if和v-else-if指令來控制其(qi)他(ta)元(yuan)素達到并存(cun)的狀態。

　　換個(ge)直白(bai)的解釋,就是有(you)一個(ge)唯一的父(fu)類,包裹(guo)者; 比(bi)如一個(ge) div(父(fu)包含(han)塊) 內部(bu)多(duo)少個(ge)同級或者嵌套都行,但(dan)是最(zui)外層元素不(bu)能出現(xian)同級元素!

　　Q11：跨域問題怎么破!比如No ‘
Access-Control-Allow-Origin’ header is present on the requested resource.

　　這種問題老(lao)生常談了(le),我就不細說了(le)..大(da)體(ti)說一下(xia);

　　1: CORS , 前后(hou)端都要對(dui)應去配置,IE10+

　　2: nginx 反(fan)向代理,一(yi)勞永逸 <-- 線上(shang)環境可以用這(zhe)個

　　線下開發模式,比如(ru)你(ni)用了(le)vue-cli, 里(li)面的 webpack 有引入(ru)了(le)proxyTable這么(me)個玩(wan)意, 也可以(yi)做接口反向代理。

　　// 在 config 目錄(lu)下(xia)的index.js

　　proxyTable: {

　　 "/bp-api": {

　　 target: "//new.d.st.cn",

　　 changeOrigin: true,

　　 // pathRewrite: {

　　 // "^/bp-api": "/"

　　 // }

　　 }

　　}

　　// target : 就是 api 的代理的實際路徑

　　// changeOrigin: 就是(shi)是(shi)變源,必須是(shi)...

　　// pathRewrite : 就是路徑重定(ding)向,一看就知道

　　當然還有依舊堅挺的jsonp大法!不(bu)過局限性(xing)比較多,比較適合(he)一些特殊的信息獲取(qu)!

　　Q12：我(wo)需要遍歷的(de)數組值更新(xin)了,值也(ye)賦(fu)值了,為什(shen)么視圖(tu)不(bu)更新(xin)!

　　那是因為(wei)有(you)局限性啊,官方(fang)文檔(dang)也(ye)說的很清楚,只有(you)一些魔改的之(zhi)后的方(fang)法提供跟原生一樣的使用姿勢(卻又(you)可以觸發視圖更(geng)新);

　　一般我(wo)們更(geng)常(chang)用(yong)(除了魔改方(fang)法)的手段是使用(yong):this.$set(obj,item,value);

　　Q13：為什么我的(de)組(zu)件間的(de)樣式不(bu)能繼承或者覆(fu)寫啊!

　　單組(zu)件開發(fa)模式下,請確認是(shi)否(fou)開啟了 css模塊化(hua)功能!也就是(shi)scoped(vue-cli 里面配置(zhi)了,只要(yao)加入這個屬(shu)性就自動啟用)。

　　為(wei)(wei)什么(me)不能繼承或(huo)者覆(fu)寫呢(ni),那時因(yin)為(wei)(wei)每個類或(huo)者 id 乃(nai)至標簽都會給自(zi)動在(zai)css后面添加(jia)hash! 比如：

　　// 寫的(de)時候是這個

　　.trangle{}

　　// 編譯過(guo)后,加上了 hash

　　.trangle[data-v-1ec35ffc]{}

　　這些都是在 css-loader 里面配置!!!

　　Q14：路由模式改為history后,除了首次啟動首頁(ye)沒報(bao)錯,刷新訪問路由都報(bao)錯!

　　必須給對應的服(fu)務端配置查(cha)詢(xun)的主頁面..也可(ke)以認為是主路(lu)由入口的引導。

　　官方文(wen)檔也(ye)有,為毛總有人不喜歡(huan)去看文(wen)檔,總喜歡(huan)做(zuo)伸手黨。

　　Q15：我想攔(lan)截頁(ye)(ye)面,或者在頁(ye)(ye)面進來之前做一些事(shi)情(qing),可以(yi)么?

　　可(ke)以的(de)(de)，各種(zhong)路(lu)由器的(de)(de)鉤子(zi)!!當然,記憶滾(gun)動的(de)(de)位置也(ye)可(ke)以做到,詳情翻翻官網(wang)里面的(de)(de)文檔。

　　Q16：TypeError: xxx is not a function

　　這種問(wen)題(ti)明顯就是寫法有(you)問(wen)題(ti)...能不(bu)能動(dong)點(dian)腦子!!

　　Q17：Uncaught ReferenceError: xxx is not define

　　實例內(nei)的 data 對應的變量沒有聲明(ming)，你導入模(mo)塊報(bao)這個錯誤,那絕逼是(shi)導出沒寫好。

　　Q18：Error in render function:”Type Error: Cannot read property ‘xxx’ of undefined”

　　這種問題大多(duo)都是(shi)初(chu)始化的(de)姿(zi)勢(shi)不對(dui);比如引入(ru)echart這些...仔細去(qu)了解下生命周期,再來具體初(chu)始化;

　　vue 組件(jian)有時候也會(嵌套組件(jian)或(huo)者 props傳遞(di)初始(shi)化)..也是基本這個問題

　　Q19：Unexpected token: operator xxxxx

　　大佬,這個一看(kan)就(jiu)是(shi)語(yu)法錯誤啊(a)，基(ji)本都是(shi)符(fu)號問題(ti)， 一般(ban)報錯會給出(chu)哪一行或者哪個組件。

　　Q20：npm run build之后不能直接(jie)訪問

　　大(da)佬!你最起碼得在本地搭個服務器才(cai)能(neng)訪問好么!!

　　Q21：CSSbackground引入(ru)圖片打包后,訪問路(lu)徑錯誤

　　因為打包后圖片(pian)是(shi)在根目(mu)錄下,你用相(xiang)對路(lu)徑肯定報錯啊....

　　你(ni)可以魔改(gai) webpack 的(de)配置(zhi)文件里(li)面的(de)static為./static...但是不建議。你(ni)若是把(ba)圖片什么丟到assets目錄下(xia),然后相對路徑(jing),打包后是正常(chang)的(de)。

　　Q22：安裝模塊時命令窗口輸出unsupported platform xxx

　　一般兩(liang)種情況,node版本不(bu)兼(jian)容(rong),系(xi)統不(bu)兼(jian)容(rong);

　　 解決方案: 要么(me)不裝,要么(me)滿足(zu)安(an)裝要求(qiu);

　　Q23：Unexpected tab charater這些

　　一(yi)般(ban)是你用(yong)腳手(shou)架(jia)初始化的時候開(kai)了(le) eslint ;要(yao)(yao)么遵循(xun)規則,要(yao)(yao)么改變規則;要(yao)(yao)么直(zhi)接(jie)把 webpack 里面(mian)的 eslint 檢測給關閉(bi)了(le)。

　　Q24：Failed to mount component: template or render function not defined

　　組(zu)件掛載失敗,問題只(zhi)有這(zhe)么幾(ji)個(ge)

　　組件沒有正確(que)引入;

　　掛載(zai)點順序錯了了; 自行動手排查

　　Q25：Unknown custom element: - did you register the component correctly?

　　組件沒有正確引入(ru)或者(zhe)正確使(shi)用,依次確認

　　導入對應的組件

　　在(zai) components 內聲明

　　在 dom 區域(yu)聲明標簽(qian)

　　Q26：axios的 post 請求后臺接受不到(dao)!

　　axios默認是(shi) json 格式提(ti)交(jiao),確認后臺是(shi)否做(zuo)了(le)對應(ying)的支持;若(ruo)是(shi)只能接(jie)受(shou)傳統的表單序(xu)列化,就(jiu)需要自己(ji)寫(xie)一個轉義的方(fang)法...當然還有一個更(geng)加省事的方(fang)案(an),裝一個小模塊qs.

　　npm install qs -S

　　// 然(ran)后在對(dui)應(ying)的(de)地方轉就行(xing)了(le)..單一請求也行(xing),攔截器(qi)也行(xing)...我(wo)是(shi)寫在攔截器(qi)的(de).

　　// 具體可以看(kan)看(kan)我(wo) axios 封裝那篇(pian)文章(zhang)

　　//POST傳參(can)序(xu)列化(添加請求攔截器)

　　
Axios.interceptors.request.use(

　　 config => {

　　 // 在發送請求之前做某(mou)件事

　　 if (

　　 config.method === "post"

　　 ) {

　　 // 序列化

　　 config.data = qs.stringify(config.data); // ***** 這里(li)轉義

　　 }

　　 // 若(ruo)是有(you)做鑒(jian)權token , 就給(gei)頭(tou)部帶(dai)上token

　　 if (localStorage.token) {

　　
config.headers.Authorization = localStorage.token;

　　 }

　　 return config;

　　 },

　　 error => {

　　 Message({

　　 // 餓(e)了么(me)的消息彈窗組件,類似toast

　　 showClose: true,

　　 message: error,

　　 type: "error.data.error.message"

　　 });

　　 return Promise.reject(error.data.error.message);

　　 }

　　);

　　Q27：Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.

　　這(zhe)種問題一(yi)般就是(shi)組件內的(de) props 類(lei)型已(yi)經(jing)設(she)置了接受(shou)的(de)范圍類(lei)型, 而你傳遞的(de)值卻(que)又(you)不是(shi)它需要的(de)類(lei)型,寫代碼嚴謹些 OK?

　　Q28：過濾器可以用于DOM區域結合指令么?

　　// 不行,看下面的錯誤例子

• {{item}}

　　// `vue2+`的指(zhi)令只能用語 mustache`{{}}` , 正確姿勢如下(xia):

　　{{ message | capitalize }}

　　Q29：[…Array],…mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {}這種寫法是什么(me)鬼(gui)!

　　ES6+(ES2015)的基礎(chu)去(qu)過一遍..上(shang)面依(yi)次:數組解構(gou),對象(xiang)(xiang)解構(gou),對象(xiang)(xiang)風格(ge)函(han)數,對象(xiang)(xiang)解構(gou)賦值傳遞。

　　Q30：我的 Vue 網站為(wei)什么 UC 訪問一片(pian)空白亦或者flex布局錯(cuo)亂!!

　　來來來,墻角走起.... UC 號稱移動界的 IE 這稱號不是(shi)白叫的。flexbox 布局錯亂,一般(ban)是(shi)你(ni)沒(mei)有(you)把兼容方案(an)寫上..就是(shi)帶各種(zhong)前綴,復合屬性拆(chai)分。

　　UC訪(fang)問空白, 有一種情況絕對(dui)會造成(cheng),那就是(shi)(shi) ES6的(de)代碼降級不夠徹底. 其(qi)他情況可能(neng)就是(shi)(shi)路由配置問題(自(zi)己去排除)，現在的(de)開(kai)發都(dou)推薦按需(xu)引入,靠(kao)babel-preset-env 來控制,以達到打包體(ti)積減小。

　　但(dan)是這樣做的(de)后果,有些內核(he)比較(jiao)老的(de)...嘿嘿..拜拜。所以最好把(ba)代碼(ma)完全 ES5話(hua)!!記住有些特性(xing)不(bu)能(neng)亂使用,沒有對(dui)應的(de) polyfill,比如 ES6 的(de)proxy

　　Q31：this.$set | this.$xxx 這(zhe)個(ge) $ 是個(ge)什么(me)意思?是 jQuery的么(me),會沖突么(me)?

　　且看(kan)我(wo)細細道來.

　　Vue 的(de)(de)$和 jQuery 的(de)(de)$并沒有半(ban)毛錢的(de)(de)關(guan)系,就跟JavaScript和java一(yi)樣.

　　Vue 的$是(shi)封裝了一(yi)些 vue 的內建函(han)數,然后導出以(yi)$開頭...這顯然并不(bu)是(shi) jQuery的專利;

　　jQuery 的$是選擇器!!取得 DOM區域(yu)...兩者的作用(yong)完全(quan)不一致!

　　Q32：Error in event handler for “click”:”xxx”

　　這個問(wen)題(ti)大多都是(shi)你寫的(de)代碼有問(wen)題(ti).你的(de)事件(jian)觸發了,但是(shi)組(zu)件(jian)內部缺少對(dui)應的(de)實現或者(zhe)變量,所以(yi)拋出事件(jian)錯誤。

　　解決(jue)方案:看著報錯慢慢排查

　　Q33： 組件的(de)通訊(xun)有哪幾種啊!

　　基本最(zui)常用的是(shi)這幾種;

　　父傳(chuan)子: props

　　子傳(chuan)父: emit

　　兄弟通訊(xun):event bus: 就是找一個中間組件(jian)來作為(wei)信(xin)息(xi)傳遞中介

　　vuex: 信(xin)息樹

　　Q34：vuex的用戶(hu)信息(xi)為什么還要存一遍(bian)在瀏(liu)覽器里(li)(sessionStorage or localStorage)

　　因為 vuex的 store 干不過刷新(xin)啊，保(bao)存在瀏覽器的緩存內(nei),若用戶刷新(xin)的話(hua),值再(zai)取一遍唄;

　　Q35：“有 Vue + Vue Router + Vuex”或(huo)什么”express + vue + mongodb”的項目學習么

　　Github 一搜一大堆(dui),提這些問題(ti)的人(ren)動(dong)動(dong)腦子(zi)!

　　Q36：線上若是(shi) nginx,如(ru)何部署?以及(ji)反向(xiang)代理(li)這些!

　　1.將node端(duan)的(de)服(fu)務端(duan)口放入服(fu)務器的(de)80端(duan)口，做(zuo)反向(xiang)代理，這(zhe)里用的(de)是3000端(duan)口來做(zuo)示范

　　#先定義一個website變(bian)量(liang)，方便管理(li)以(yi)后(hou)端口的變(bian)更，不會影響到后(hou)續的80端口其他(ta)的操(cao)作(zuo)

　　upstream website{

　　 server 127.0.0.1:3000;

　　}

　　server {

　　 listen 80;

　　#業(ye)戶邏輯... ...

　　####

　　 location / {

　　 proxy_pass //website;

　　 proxy_redirect default ;

　　 }

　　####

　　}

　　Q37：“我會 Vue 我還需要學習(xi) jQuery 或者原生 JS 么”

　　jQuery還有很多(duo)公司在用,源(yuan)碼可以學習的地(di)方很多(duo);原生 js 是根本,不(bu)管是哪個前端(duan)框架,最終都是 js 實現的;只有基礎扎實,才能學的比較(jiao)深(shen)...

　　框架只是加(jia)快開發,提高效率(lv),但不是你(ni)在這(zhe)一(yi)行長期立(li)足的根本;

　　前端的人不僅(jin)需要寬度,也要深度...這樣才能走的更(geng)遠(yuan)....

　　Q38：npm run dev 報端口(kou)錯誤!Error: listen EADDRINUSE :::8080

　　自(zi)己用(yong) webpack搭腳(jiao)手(shou)架的都不用(yong)我說了;Vue-cli 里面的 webpack 配置: config/index.js

　　dev: {

　　 env: require("./dev.env"),

　　 port: 8080, // 這里(li)這里(li),若是這個端口已經給系(xi)統的(de)其他(ta)程序占用了(le).改我(wo)(wo)改我(wo)(wo)!!!!!!

　　 autoOpenBrowser: true,

　　 assetsSubDirectory: "static",

　　 assetsPublicPath: "/",

　　 proxyTable: {

　　 "/bp-api": {

　　 target: "//new.d.st.cn",

　　 changeOrigin: true,

　　 // pathRewrite: {

　　 // "^/bp-api": "/"

　　 // }

　　 }

　　},

　　Q39：什么時候用(yong)v-if,什么用(yong) v-show!

　　我們先(xian)來說說兩者的核心差(cha)異;

　　v-if : DOM 區域沒(mei)有(you)生成(cheng),沒(mei)有(you)插(cha)入文(wen)檔..等條件(jian)成(cheng)立的時候才動態插(cha)入到頁面!有(you)些需要(yao)遍(bian)歷(li)的數組對(dui)象(xiang)或者值,最好用這貨控制(zhi),等到拿(na)到值才處理遍(bian)歷(li),不然一(yi)些操(cao)作過快的情況會(hui)報(bao)錯,比如數據(ju)還(huan)沒(mei)請求到!

　　v-show: DOM 區域在組件渲染的(de)時候同時渲染了,只(zhi)是單(dan)純用(yong) css 隱藏了，對(dui)于下拉菜單(dan),折疊菜單(dan)這些數(shu)據基本不怎么變(bian)動.用(yong)這個最合適了..而且可以改(gai)善用(yong)戶體驗,因為它不會導致頁面的(de)重(zhong)繪,DOM 操作(zuo)會!

　　簡言之: DOM結構(gou)不(bu)怎么變化(hua)的用v-show, 數據需(xu)要改動很(hen)大或者(zhe)布(bu)局改動的用v-if

　　Q40：