Vue腳手架報錯 Component name "Student" should always be multi-word vue/multi-word-component-names

南城小友發表於2022-02-19
Vue

報錯資訊分析:

新手在第一個次使用腳手架的時候難免會遇到各種各樣奇怪的問題,最近在學習Vue的過程中就出現瞭如下問題
image

通過閱讀報錯資訊可知: 是我們的元件名有一些問題,(報錯資訊翻譯過來大概就是元件名"Student"應該總是使用 多個單詞拼接橫線組成的)
可是我查閱資料發現,其實元件名也是可以使用單個單詞的,只是官方文件上面的風格建議我們使用大駝峰或-銜接的方式而已

問題原因

通過後續學習瞭解到,這其實是語法檢查的時候把不規範的程式碼(即命名不規範)當成了錯誤

解決方案:

  • 更改元件名(這個比較麻煩),也就是重新起個元件名,使其符合命名規範,如: StudentName 或者 student-name
  • 修改配置項,關閉語法檢查
    1.在專案的根目錄找到(沒有就建立)vue.config.js檔案
    image

2.在檔案中新增如下內容

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 lintOnSave:false
})

3.隨後儲存檔案重新編譯即可

所屬環境

注: 本人是在win10作業系統下, 腳手架版本:@vue/cli 5.0.1,親測有效

相關文章