今早起來看見 VS-Code 提示可更新,于是我就點了。。。
升級完之后驚喜出現了:
template 提示錯誤.jpg
我所有的
template
代碼全部飄紅,而 style
和 script
的內容是沒有問題的。
原因:
我用的 vue
語法提示插件是:Vetur ,此處缺少一項用戶設置。
解決辦法:
打開 VS-Code ,依次打開-->文件-->首選項-->設置,打開后是這樣:
用戶設置.jpg
左側窗口為默認設置,右側為用戶設置,即可以自定義一些插件。然后加入紅框標注的這句代碼就好了,代碼如下:
"vetur.validation.template": false
啟動項目后,又有如下提示:
黃色提示.jpg
WARNING in ./src/assets/components/Foot.vue
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\lf182\Desktop\fute+\futepcone\node_modules\vue-loader\index.js??ref--1!C:\Users\lf182\Desktop\fute+\futepcone\src\assets\components\Foot.vue
Used by 5 module(s), i. e.
C:\Users\lf182\Desktop\fute+\futepcone\node_modules\babel-loader\lib\index.js!C:\Users\lf182\Desktop\fute+\futepcone\node_modules\vue-loader\lib\selector.js?type=script&index=0&bustCache!C:\Users\lf182\Desktop\fute+\futepcone\src\assets\components\news\News.vue
* C:\Users\lf182\Desktop\fute+\futepcone\node_modules\vue-loader\index.js??ref--1!C:\Users\lf182\Desktop\fute+\futepcone\src\assets\components\foot.vue
Used by 1 module(s), i. e.
C:\Users\lf182\Desktop\fute+\futepcone\node_modules\babel-loader\lib\index.js!C:\Users\lf182\Desktop\fute+\futepcone\node_modules\vue-loader\lib\selector.js?type=script&index=0&bustCache!C:\Users\lf182\Desktop\fute+\futepcone\src\assets\components\product\Product.vue
@ ./src/assets/components/Foot.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/assets/components/news/News.vue
@ ./src/assets/components/news/News.vue
@ ./src/assets/components/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
雖然項目也能正常啟動,但是作為一個程序員,這是不能忍的事情。
最后發現是自己的代碼不規范,新建的 .vue
文件名字是大寫的,然而用 import
引入的時候卻寫成了小寫,要不是今天更新 VS-Code ,我都沒發現這個問題。
總結:
作為一個程序員,一定要謹慎謹慎再謹慎;寫代碼一定要規范規范再規范。少給自己挖坑,才能愉快的敲代碼。??????