欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總

 更新時間:2023年03月27日 11:53:36   作者:憶凡_  
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關(guān)資料,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

大家好,上一期的Vue實戰(zhàn)都閱讀了嗎?上一期主要是講解了Vue2中父子組件如何進(jìn)行通信,通過父子組件通信我們可以把一些繁瑣簡單的工作抽離出來封裝成組件,以便與我們更好書寫代碼。
相信大家在實際開發(fā)當(dāng)中也會各種各樣的控制臺報錯,今天博主就為大家總結(jié)一些,大家還有其他的也可以在評論區(qū)補(bǔ)充哦。

安裝超時(install timeout)

在我們拿到新項目npm install下載依賴的時候,經(jīng)常會報的一個錯誤,方案有這么些:

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
當(dāng)然條件允許的話可以上一些科技哈哈哈

can’t not find ‘xxModule’ - 找不到某些依賴或者模塊

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

data functions should return an object

這個問題是 vue 實例內(nèi),單組件的data必須返回一個對象;如下

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [
          {
            title: '財務(wù)信息',
            url: '/userinfo'
          },
          {
            title: '帳號信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

為什么要 return 一個數(shù)據(jù)對象呢? 官方解釋如下: data
必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù),因為組件可能被用來創(chuàng)建多個實例。如果 data
仍然是一個純粹的對象,則所有的實例將共享引用同一個數(shù)據(jù)對象!簡言之,組件復(fù)用下,不會造成數(shù)據(jù)同時指向一處,造出牽一發(fā)而動全身的破問題

給組件內(nèi)的原生控件添加事件,不生效了

<!--比如用了第三方框架,或者一些封裝的內(nèi)置組件; 然后想綁定事件-->
<!--// 錯誤例子1-->
<el-input placeholder="請輸入特定消費金額 " @mouseover="test()"></el-input>
<!--// 錯誤例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--上面的兩個例子都沒法觸發(fā)事件!!!-->
<!--究其原因,少了一個修飾符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!---->

我在函數(shù)內(nèi)用了this.xxx=,為什么拋出Cannot set property ‘xxx’ of undefined;

這又是this的套路了,this是和當(dāng)前運行的上下文綁定的;

一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子.

簡單點說:“最外層的上下文就是 window,vue內(nèi)則是 Vue 對象而不是實例!”;

解決方案:

暫存法: 函數(shù)內(nèi)先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數(shù): 會強(qiáng)行關(guān)聯(lián)當(dāng)前運行區(qū)域為 this 的上下文;

Uncaught ReferenceError: xxx is not define;

實例內(nèi)的 data 對應(yīng)的變量沒有聲明,你導(dǎo)入模塊報這個錯誤,那一定是導(dǎo)出沒寫好。

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": "/"
        // }
    }
},

the “scope” attribute for scoped slots …. replaced by “slot-scope” since 2.5

這個問題只出現(xiàn)老項目升級到 vue2.5+的時候, 提示就是 scope 現(xiàn)在要用 slot-scope 來代替,但是 scope 暫時可以用,以后會移除

單組件中里面的 import xxx from ‘@/components/layout/xxx’中的@是什么

這是 webpack 方面的知識,看到了也說下吧…webpack可以配置alias(也就是路徑別名),玩過 linux 或者 mac 都知道。
依舊如上,會自己搭腳手架的不用我說了…看看 vue-cli 里面的;
文件名: build -> webpack.base.conf.js

resolve: {
    extensions: [".js", ".vue", ".json"], // 可以導(dǎo)入的時候忽略的拓展名范圍
    alias: {
      vue$: "vue/dist/vue.esm.js",  
      "@": resolve("src"),  // 這里就是別名了,比如@就代表直接從/src 下開始找起!!!
      "~": resolve("src/components")
    }
},

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

這種問題一般就是組件內(nèi)的 props 類型已經(jīng)設(shè)置了接受的范圍類型, 而你傳遞的值卻又不是它需要的類型,寫代碼嚴(yán)謹(jǐn)些 OK?

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

組件沒有正確引入或者正確使用,依次確認(rèn)

導(dǎo)入對應(yīng)的組件
在 components 內(nèi)聲明
在 dom 區(qū)域聲明標(biāo)簽

Unexpected token: operator xxxxx

大佬,這個一看就是語法錯誤啊,基本都是符號問題, 一般報錯會給出哪一行或者哪個組件

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

1: CORS , 前后端都要對應(yīng)去配置,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 : 就是路徑重定向,一看就知道

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指令來控制其他元素達(dá)到并存的狀態(tài)。
換個直白的解釋,就是有一個唯一的父類,包裹者; 比如一個 div(父包含塊) 內(nèi)部多少個同級或者嵌套都行,但是最外層元素不能出現(xiàn)同級元素!

寫在最后

這篇文章分析那個了一些vue開發(fā)比較常見的報錯,你是否也經(jīng)歷過呢?后續(xù)會為小伙伴們持續(xù)更新Vue的一些實戰(zhàn)小魔法!

到此這篇關(guān)于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的文章就介紹到這了,更多相關(guān)Vue項目開發(fā)常見錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 關(guān)于element?ui的菜單default-active默認(rèn)選中的問題

    關(guān)于element?ui的菜單default-active默認(rèn)選中的問題

    這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認(rèn)選中的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue表單實例代碼

    Vue表單實例代碼

    Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。這篇文章主要介紹了Vue表單實例代碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-09-09
  • Vue?瀏覽器本地存儲的問題小結(jié)

    Vue?瀏覽器本地存儲的問題小結(jié)

    這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage,存儲大小一般支持5mb左右,但是不同的瀏覽器也有區(qū)別,具體內(nèi)容介紹跟隨小編一起看看吧
    2022-04-04
  • element UI 中的 el-tree 實現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)功能

    element UI 中的 el-tree 實現(xiàn) checkbox&n

    在日常項目開發(fā)中,會經(jīng)常遇到,樹形結(jié)構(gòu)的查詢方式,為了快速方便開發(fā),常常會使用到快捷的ui組件去快速搭樹形結(jié)構(gòu),這里我用的是 element ui 中的 el-tree,對element UI 中的 el-tree 實現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧
    2022-09-09
  • Vite的createServer啟動源碼解析

    Vite的createServer啟動源碼解析

    這篇文章主要為大家介紹了Vite的createServer啟動源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法

    vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法

    今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue.js函數(shù)式組件的全面了解

    Vue.js函數(shù)式組件的全面了解

    函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this(不需要實例化的組件),這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • vue實現(xiàn)一個單文件組件的完整過程記錄

    vue實現(xiàn)一個單文件組件的完整過程記錄

    整個項目結(jié)構(gòu)清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個組件的邏輯都沒有過于復(fù)雜,所以這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)一個單文件組件的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue中如何去掉空格的方法實現(xiàn)

    vue中如何去掉空格的方法實現(xiàn)

    這篇文章主要介紹了vue中如何去掉空格的方法實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 在vue項目中promise解決回調(diào)地獄和并發(fā)請求的問題

    在vue項目中promise解決回調(diào)地獄和并發(fā)請求的問題

    這篇文章主要介紹了在vue項目中promise解決回調(diào)地獄和并發(fā)請求的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11

最新評論