日韩 亚洲一区二_久久vs国产综合色大全_国产精品福利在线_欧美在线一级A片免费观看欧美在线_女同性毛片60分钟

您現(xiàn)在所在的位置：首頁(yè) >關(guān)於奇酷 > 行業(yè)動(dòng)態(tài) > 60個(gè)前端框架Vue常見(jiàn)問(wèn)題匯總及解決方案

60個(gè)前端框架Vue常見(jiàn)問(wèn)題匯總及解決方案

來(lái)源：奇酷教育 發(fā)表於：

60個(gè)前端框架Vue常見(jiàn)問(wèn)題匯總及解決方案

　　Q1：安裝超時(shí)(install timeout)
 
　　方案有這麼些:
　　cnpm : 國(guó)內(nèi)對(duì)npm的鏡像版本
　　/*
　　cnpm website: https://npm.taobao.org/
　　*/
　　npm install -g cnpm --registry=https://registry.npm.taobao.org
 
　　// cnpm 的大多命令跟 npm 的是一致的,比如安裝,卸載這些
　　yarn 和 npm 改源大法
 
　　//使用 nrm 模塊 : www.npmjs.com/package/nrm
　　npm config : npm config set registry https://registry.npm.taobao.org
　　yarn config : yarn config set registry https://registry.npm.taobao.org
　　Q2：安裝一些需要編譯的包:提示沒有安裝python、build失敗等 
 
　　因為一些 npm 的包安裝需要編譯的環(huán)境,mac 和 linux 都還好,大多都齊全 window 用戶(hù)依賴 visual studio 的一些庫(kù)和python 2+, windows的小夥伴都裝上: windows-build-tools python 2.x
 
　　Q3：can’t not find ‘xxModule’ - 找不到某些依賴或者模塊
 
　　這種情況一般報(bào)錯信息可以看到是哪個(gè)包拋出的信息.，一般卸載這個(gè)模塊,安裝重新安裝下即可.
 
　　Q4：data functions should return an object
 
　　這個(gè)問(wèn)題是 vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對(duì)象;如下
 
　　export default {
　　  name: 'page-router-view',
　　      data () {
　　      return {
　　        tabs: [
　　          {
　　            title: '財務(wù)信息',
　　            url: '/userinfo'
　　          },
　　          {
　　            title: '帳號(hào)信息',
　　            url: '/userinfo/base'
　　          }
　　        ]
　　      }
　　    }
　　}
　　為什麼要 return 一個(gè)數(shù)據(jù)對(duì)象呢? 官方解釋如下: data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因為組件可能被用來(lái)創(chuàng)建多個(gè)實(shí)例。如果 data 仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！簡(jiǎn)言之,組件復用下,不會(huì)造成數(shù)據(jù)同時(shí)指向一處,造出牽一髮而動(dòng)全身的破問(wèn)題...
 
　　Q5：我給組件內(nèi)的原生控制項(xiàng)添加事件,怎麼不生效了!!!
 
　　
　　
　　
　　
　　
　　 
　　  {{item.menuName}}
　　
　　
　　
　　
　　 
　　  {{item.menuName}}
　　
　　
　　
　　Q6：我用了 axios , 為什麼 IE 瀏覽器不識別(IE9+)
 
　　那是因為 IE 整個(gè)家族都不支持 promise, 解決方案:
　　npm install es6-promise
　　// 在 main.js 引入即可
　　// ES6的polyfill
　　require("es6-promise").polyfill();
　　Q7：我在函數(shù)內(nèi)用了this.xxx=,為什麼拋出Cannot set property ‘xxx’ of undefined;
 
　　這又是this的套路了..this是和當(dāng)前運(yùn)行的上下文綁定的... 
 
　　一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子. 
 
　　簡(jiǎn)單點(diǎn)說(shuō):"最外層的上下文就是 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ū)域為 this 的上下文; 
　　Q8：我看一些Vue教程有這麼些寫(xiě)法,是什麼意思@click.prevent,v-demo.a.b;
 
　　就拿這兩(liǎng)個(gè)例子來(lái)說(shuō)吧. 
 
　　@click.prevent : 事件+修飾符 , 作用就是點(diǎn)擊但又阻止默認(rèn)行為。
 
　　v-demo.a.b: 自定義指令+修飾符. 具體看你什麼指令了,修飾符的作用大多是給事件增加一些確切的拓展功能，比如阻止事件冒泡,阻止默認(rèn)行為,訪(fǎng)問(wèn)到原生控制項(xiàng),結(jié)合鍵盤(pán)快捷鍵等等 。
 
　　可以自定義修飾符麼?也是可以的。可以通過(guò)全局 config.keyCodes 對(duì)象自定義鍵值修飾符別名：
 
　　Q9：為什麼我的引入的小圖片渲染出來(lái)卻是 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的請求次數(shù)來(lái)減少網(wǎng)站伺服器的負(fù)擔(dān)。
 
　　Q10：Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
 
　　大體就是說(shuō),單組件渲染 DOM 區(qū)域必須要有一個(gè)根元素,不能出現(xiàn)同級(jí)元素. 可以用v-if和v-else-if指令來(lái)控制其他元素達(dá)到並存的狀態(tài)。
 
　　換(huàn)個(gè)直白的解釋,就是有一個(gè)唯一的父類(lèi),包裹者; 比如一個(gè) div(父包含塊) 內(nèi)部多少個(gè)同級(jí)或者嵌套都行,但是最外層元素不能出現(xiàn)同級(jí)元素!
 
　　Q11：跨域問(wèn)題怎麼破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
 
　　這種問(wèn)題老生常談了,我就不細(xì)說(shuō)了..大體說(shuō)一下; 
 
　　1: CORS , 前後端都要對(duì)應(yīng)去配置,IE10+ 
　　2: nginx 反向代理,一勞永逸 <-- 線(xiàn )上環(huán)境可以用這個(gè)
　　線(xiàn )下開(kāi)發(fā)模式,比如你用了vue-cli, 裡面的 webpack 有引入了proxyTable這麼個(gè)玩意, 也可以做接口反向代理。
 
　　// 在 config 目錄下的index.js
　　proxyTable: {
　　  "/bp-api": {
　　    target: "http://new.d.st.cn",
　　    changeOrigin: true,
　　    // pathRewrite: {
　　    //   "^/bp-api": "/"
　　    // }
　　  }
　　}
 
　　// target : 就是 api 的代理的實(shí)際路徑
　　// changeOrigin: 就是是變源,必須是...
　　// pathRewrite : 就是路徑重定向,一看就知道
　　當(dāng)然還有依舊堅(jiān)挺的jsonp大法!不過(guò)局限性比較多,比較適合一些特殊的信息獲取!
 
　　Q12：我需要遍歷的數(shù)組值更新了,值也賦值了,為什麼視圖不更新!
 
　　那是因為有局限性啊,官方文檔也說(shuō)的很清楚,只有一些魔改的之後的方法提供跟原生一樣的使用姿勢(shì)(卻又可以觸發(fā)視圖更新);
 
　　一般我們更常用(除了魔改方法)的手段是使用:this.$set(obj,item,value);
 
　　Q13：為什麼我的組件間的樣式不能繼承或者覆寫(xiě)啊!
 
　　單組件開(kāi)發(fā)模式下,請確認(rèn)是否開(kāi)啟了 css模塊化功能!也就是scoped(vue-cli 裡面配置了,只要加入這個(gè)屬性就自動(dòng)啟用)。
 
　　
　　為什麼不能繼承或者覆寫(xiě)呢,那時(shí)因為每個(gè)類(lèi)或者 id 乃至標(biāo)籤都會(huì)給自動(dòng)在css後面添加hash! 比如：
 
　　// 寫(xiě)的時(shí)候是這個(gè)
　　.trangle{}
　　// 編譯過(guò)後,加上了 hash
　　.trangle[data-v-1ec35ffc]{}
　　這些都是在 css-loader 裡面配置!!!
 
　　Q14：路由模式改為history後,除了首次啟動(dòng)首頁(yè)沒報(bào)錯,刷新訪(fǎng)問(wèn)路由都報(bào)錯!
 
　　必須給對(duì)應(yīng)的服務(wù)端配置查詢的主頁(yè)面..也可以認(rèn)為是主路由入口的引導(dǎo )。
 
　　官方文檔也有,為毛總有人不喜歡去看文檔,總喜歡做伸手黨。
 
　　Q15：我想攔截頁(yè)面,或者在頁(yè)面進(jìn)來(lái)之前做一些事情,可以麼?
 
　　可以的，各種路由器的鉤子!!當(dāng)然,記憶滾動(dòng)的位置也可以做到,詳情翻翻官網(wǎng)裡面的文檔。
 
　　Q16：TypeError: xxx is not a function
 
　　這種問(wèn)題明顯就是寫(xiě)法有問(wèn)題...能不能動(dòng)點(diǎn)腦子!!
 
　　Q17：Uncaught ReferenceError: xxx is not define
 
　　實(shí)例內(nèi)的 data 對(duì)應(yīng)的變量沒有聲明，你導(dǎo )入模塊報(bào)這個(gè)錯誤,那絕逼是導(dǎo )出沒寫(xiě)好。
 
　　Q18：Error in render function:”Type Error: Cannot read property ‘xxx’ of undefined”
 
　　這種問(wèn)題大多都是初始化的姿勢(shì)不對(duì);比如引入echart這些...仔細(xì)去了解下生命周期,再來(lái)具體初始化;
 
　　vue 組件有時(shí)候也會(huì)(嵌套組件或者 props傳遞初始化)..也是基本這個(gè)問(wèn)題
 
　　Q19：Unexpected token: operator xxxxx
 
　　大佬,這個(gè)一看就是語法錯誤啊，基本都是符號(hào)問(wèn)題， 一般報(bào)錯會(huì)給出哪一行或者哪個(gè)組件。
 
　　Q20：npm run build之後不能直接訪(fǎng)問(wèn)
 
　　大佬!你最起碼得在本地搭個(gè)伺服器才能訪(fǎng)問(wèn)好麼!!
 
　　Q21：CSSbackground引入圖片打包後,訪(fǎng)問(wèn)路徑錯誤
 
　　因為打包後圖片是在根目錄下,你用相對(duì)路徑肯定報(bào)錯啊....
 
　　你可以魔改 webpack 的配置文件裡面的static為./static...但是不建議。你若是把圖片什麼丟到assets目錄下,然後相對(duì)路徑,打包後是正常的。
 
　　Q22：安裝模塊時(shí)命令窗口輸(shū)出unsupported platform xxx
 
　　一般兩(liǎng)種情況,node版本不兼容,系統(tǒng)不兼容; 
 
　　 解決方案: 要麼不裝,要麼滿(mǎn)足安裝要求;
 
　　Q23：Unexpected tab charater這些
 
　　一般是你用腳手架初始化的時(shí)候開(kāi)了 eslint ;要麼遵循規(guī)則,要麼改變規(guī)則;要麼直接把 webpack 裡面的 eslint 檢測(cè)給關(guān)閉了。
 
　　Q24：Failed to mount component: template or render function not defined
 
　　組件掛載失敗,問(wèn)題只有這麼幾個(gè) 
 
　　組件沒有正確引入; 
　　掛載點(diǎn)順序錯了了; 自行動(dòng)手排查
　　Q25：Unknown custom element: - did you register the component correctly?
 
　　組件沒有正確引入或者正確使用,依次確認(rèn)
 
　　導(dǎo )入對(duì)應(yīng)的組件
　　在 components 內(nèi)聲明 
　　在 dom 區(qū)域聲明標(biāo)籤
　　Q26：axios的 post 請求後臺(tái)接受不到!
 
　　axios默認(rèn)是 json 格式提交,確認(rèn)後臺(tái)是否做了對(duì)應(yīng)的支持;若是只能接受傳統(tǒng)的表單序列化,就需要自己寫(xiě)一個(gè)轉(zhuǎn)義的方法...當(dāng)然還有一個(gè)更加省事的方案,裝一個(gè)小模塊qs.
 
　　npm install qs -S
　　// 然後在對(duì)應(yīng)的地方轉(zhuǎn)就行了..單一請求也行,攔截器也行...我是寫(xiě)在攔截器的.
　　// 具體可以看看我 axios 封裝那篇文章
　　//POST傳參序列化(添加請求攔截器)
　　Axios.interceptors.request.use(
　　  config => {
　　    // 在發(fā)送請求之前做某件事
　　    if (
　　      config.method === "post"
　　    ) {
　　      // 序列化
　　      config.data = qs.stringify(config.data); // ***** 這裡轉(zhuǎn)義
　　    }
 
　　    // 若是有做鑑權(quán)token , 就給頭部帶上token
　　    if (localStorage.token) {
　　      config.headers.Authorization = localStorage.token;
　　    }
　　    return config;
　　  },
　　  error => {
　　    Message({
　　      //  餓了麼的消息彈窗組件,類(lèi)似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.
 
　　這種問(wèn)題一般就是組件內(nèi)的 props 類(lèi)型已經(jīng)設(shè)置了接受的範圍類(lèi)型, 而你傳遞的值卻又不是它需要的類(lèi)型,寫(xiě)代碼嚴(yán)謹(jǐn)些 OK?
 
　　Q28：過(guò)濾器可以用於DOM區(qū)域結(jié)合指令麼?
 
　　// 不行,看下面的錯誤例子
　　
  • {{item}}
　　// `vue2+`的指令只能用語 mustache`{{}}` , 正確姿勢(shì)如下:
　　{{ message | capitalize }}
　　Q29：[…Array],…mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {}這種寫(xiě)法是什麼鬼!
 
　　ES6+(ES2015)的基礎(chǔ)去過(guò)一遍..上面依次:數(shù)組解構(gòu ),對(duì)象解構(gòu ),對(duì)象風(fēng)格函數(shù),對(duì)象解構(gòu )賦值傳遞。
 
　　Q30：我的 Vue 網(wǎng)站為什麼 UC 訪(fǎng)問(wèn)一片空白亦或者flex布局錯亂!!
 
　　來(lái)來(lái)來(lái),牆角走起.... UC 號(hào)稱(chēng)移動(dòng)界的 IE 這稱(chēng)號(hào)不是白叫的。flexbox 布局錯亂,一般是你沒有把兼容方案寫(xiě)上..就是帶各種前綴,複合屬性拆分。
 
　　UC訪(fǎng)問(wèn)空白, 有一種情況絕對(duì)會(huì)造成,那就是 ES6的代碼降級(jí)不夠徹底. 其他情況可能就是路由配置問(wèn)題(自己去排除)，現(xiàn)在的開(kāi)發(fā)都推薦按需引入,靠babel-preset-env 來(lái)控制,以達(dá)到打包體積減小。
 
　　但是這樣做的後果,有些內(nèi)核比較老的...嘿嘿..拜拜。所以最好把代碼完全 ES5話(huà)!!記住有些特性不能亂使用,沒有對(duì)應(yīng)的 polyfill,比如 ES6 的proxy
 
　　Q31：this.$set | this.$xxx 這個(gè) $ 是個(gè)什麼意思?是 jQuery的麼,會(huì)衝突麼?
 
　　且看我細(xì)細(xì)道來(lái).
 
　　Vue 的$和 jQuery 的$並沒有半毛錢的關(guān)係,就跟JavaScript和java一樣.
　　Vue 的$是封裝了一些 vue 的內(nèi)建函數(shù),然後導(dǎo )出以$開(kāi)頭...這顯然並不是 jQuery的專(zhuān)利;
　　jQuery 的$是選擇器!!取得 DOM區(qū)域...兩(liǎng)者的作用完全不一致!
　　Q32：Error in event handler for “click”:”xxx”
 
　　這個(gè)問(wèn)題大多都是你寫(xiě)的代碼有問(wèn)題.你的事件觸發(fā)了,但是組件內(nèi)部缺少對(duì)應(yīng)的實(shí)現(xiàn)或者變量,所以拋出事件錯誤。
 
　　解決方案:看著報(bào)錯慢慢排查
 
　　Q33： 組件的通訊有哪幾種啊!
 
　　基本最常用的是這幾種;
 
　　父傳子: props 
　　子傳父: emit
　　兄弟通訊:event bus: 就是找一個(gè)中間組件來(lái)作為信息傳遞中介 
　　vuex: 信息樹
　　Q34：vuex的用戶(hù)信息為什麼還要存一遍在瀏覽器裡(sessionStorage or localStorage)
 
　　因為 vuex的 store 幹不過(guò)刷新啊，保存在瀏覽器的緩存內(nèi),若用戶(hù)刷新的話(huà),值再取一遍唄;
 
　　Q35：“有 Vue + Vue Router + Vuex”或什麼”express + vue + mongodb”的項(xiàng)目學(xué)習(xí)麼
 
　　Github 一搜一大堆,提這些問(wèn)題的人動(dòng)動(dòng)腦子!
 
　　Q36：線(xiàn )上若是 nginx,如何部署?以及反向代理這些!
 
　　1.將node端的服務(wù)埠放入伺服器的80埠，做反向代理，這裡用的是3000埠來(lái)做示範
 
　　#先定義一個(gè)website變量，方便管理以後埠的變更，不會(huì)影響到後續(xù)的80埠其他的操作
　　upstream website{
　　  server 127.0.0.1:3000;
　　}
　　 
　　server {
　　  listen 80;
　　#業(yè)戶(hù)邏輯... ...
　　####
　　  location / {
　　        proxy_pass    http://website;
　　        proxy_redirect default ;
　　  }
　　####  
　　}
　　Q37：“我會(huì) Vue 我還需要學(xué)習(xí) jQuery 或者原生 JS 麼”
 
　　jQuery還有很多公司在用,源碼可以學(xué)習(xí)的地方很多;原生 js 是根本,不管是哪個(gè)前端框架,最終都是 js 實(shí)現(xiàn)的;只有基礎(chǔ)紮實(shí),才能學(xué)的比較深...
 
　　框架只是加快開(kāi)發(fā),提高效率,但不是你在這一行長(zhǎng)期立足的根本;
 
　　前端的人不僅需要寬度,也要深度...這樣才能走的更遠(yuǎn)....
 
　　Q38：npm run dev 報(bào)埠錯誤!Error: listen EADDRINUSE :::8080
 
　　自己用 webpack搭腳手架的都不用我說(shuō)了;Vue-cli 裡面的 webpack 配置: config/index.js
 
　　dev: {
　　    env: require("./dev.env"),
　　    port: 8080, //  這裡這裡,若是這個(gè)埠已經(jīng)給系統(tǒng)的其他程序佔用了.改我改我!!!!!!
　　    autoOpenBrowser: true,
　　    assetsSubDirectory: "static",
　　    assetsPublicPath: "/",
　　    proxyTable: {
　　      "/bp-api": {
　　        target: "http://new.d.st.cn",
　　        changeOrigin: true,
　　        // pathRewrite: {
　　        //   "^/bp-api": "/"
　　        // }
　　    }
　　},
　　Q39：什麼時(shí)候用v-if,什麼用 v-show!
 
　　我們先來(lái)說(shuō)說(shuō)兩(liǎng)者的核心差異;
 
　　v-if : DOM 區(qū)域沒有生成,沒有插入文檔..等條件成立的時(shí)候才動(dòng)態(tài)插入到頁(yè)面!有些需要遍歷的數(shù)組對(duì)象或者值,最好用這貨控制,等到拿到值才處理遍歷,不然一些操作過(guò)快的情況會(huì)報(bào)錯,比如數(shù)據(jù)還沒請求到!
　　v-show: DOM 區(qū)域在組件渲染的時(shí)候同時(shí)渲染了,只是單純用 css 隱藏了，對(duì)於下拉菜單,摺疊菜單這些數(shù)據(jù)基本不怎麼變動(dòng).用這個(gè)最合適了..而且可以改善用戶(hù)體驗(yàn),因為它不會(huì)導(dǎo )致頁(yè)面的重繪,DOM 操作會(huì)!
　　簡(jiǎn)言之: DOM結(jié)構(gòu )不怎麼變化的用v-show, 數(shù)據(jù)需要改動(dòng)很大或者布局改動(dòng)的用v-if
 
　　Q40：