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

報錯資訊分析:

新手在第一個次使用腳手架的時候難免會遇到各種各樣奇怪的問題,最近在學習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,親測有效

Tags: