天堂呦呦成人AV片国产,精品黄网在线,国产亚洲精品无码,久久99精品色欲国产天美

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

60個前端框架Vue常見問題匯總及解決方案

來源:奇酷教育 發(fā)表于:

60個前端框架Vue常見問題匯總及解決方案

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