快捷導(dǎo)航

vue3.x:報錯清單及解決記錄

更新時間：2023年07月05日 14:54:45 作者：黑蘿卜不黑

這篇文章主要為大家介紹了vue3.x:報錯清單及解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

報錯提示

component name “index“ should always be multi-word

在組件命名的時候不夠規(guī)范，根據(jù)官方風格指南，除了根組件（App.vue）外，自定義組件名稱應(yīng)該由多單詞組成，防止和html標簽沖突。vue-cli創(chuàng)建的項目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names規(guī)則，所以在編譯的時候判定此次錯誤。

解決方式

1. 修改文件名稱

修改組件名為多個單詞，使用大駝峰或是小駝峰命名規(guī)則。

2. 關(guān)閉eslint校驗

在根目錄下找到vue.config.js文件（如果沒有則新建一個），添加下面的代碼：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 添加此行代碼
  lintOnSave:false
})

3. 關(guān)閉命名規(guī)則校驗

在根目錄下找到 .eslintrc.js 文件，同樣如果沒有則新建一個（注意文件前有個點），添加下面的代碼：

    "vue/multi-word-component-names":"off",

示例

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //  在rules中添加自定義規(guī)則
    //  關(guān)閉組件命名規(guī)則
     "vue/multi-word-component-names":"off",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

4. 官方建議忽略個別組件名

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     //  在rules中添加自定義規(guī)則
    //  添加組件命名忽略規(guī)則
    "vue/multi-word-component-names": ["error",{
       //  需要忽略的組件名
       "ignores": ["index"]
    }]
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上就是vue3.x:報錯清單及解決記錄的詳細內(nèi)容，更多關(guān)于vue3.x報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: