1. 程式人生 > >vue 開發中的報錯收集和整理

vue 開發中的報錯收集和整理

1、樣式程式碼的報錯

結論:拷貝了程式碼,tab 空格,與 space 空格混用了。
看你的cmd,background這一行和下面的.img-user並沒有對齊,但是在你的編輯器裡面卻又是對齊了的,再看看錯誤資訊,很明顯這是告訴你.img-user前面應該是空格,但是卻找到了個叫做eos的符號,我猜測可能是某種符號,實際上不是空格,但是在編輯器中看起來是空格的東西,你試試看真的用空格空四下吧。

2、vue 2.2.0 版本之後,v-for 迴圈必須要用 key



解決方法一:更改VS Code編輯器的vetur配置(vscode->檔案->首選項->設定->搜尋(vetur))
    將"vetur.validation.template": true, 改成"vetur.validation.template": false, 即可
方法二:補全 key,


兩種方式對比,建議還是用第一種方式,:key相當於是索引的作用,提高迴圈效能

3、報錯:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    解決方法:在 build 資料夾下 webpack.base.conf.js 檔案下的 alias 中配置:'vue$':'vue/dist/vue.js',如下圖。
    具體原因:

https://segmentfault.com/a/1190000006435886

4、報錯:type of the default value of 'data' for porp must be a function

    在用以下方式定義陣列變數時,會出現以上報錯

props: {
  data: {
    type: Array,
    default: []
  }
},

    解決方法一:

props: {
  arr: {
    type: Array,
    default: function () { return [] }
  }
}

    解決方法二:

props: {
  arr: {
    type: Array,
    default: () => [] // es6的箭頭函式
  }
}

  具體原因在尤雨溪大大的github上有人進行了討論:https://github.com/vuejs/vue/issues/1032