vue命名驼峰问题

项目场景：

vue2创建好项目的时候，在给路由组件取名字的时候，ESLint会爆出错误，需要使用驼峰命名

---

问题描述

比如书我们在src下创建一个Home.vue作为我们的一个路由组件

vscode提出报错：

Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\back\vue-back\src\view\login.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.

或者是：

Component name “index” should always be multi-word

这种类型的报错提示

---

解决方案：

关闭语法检查：

去vue.config.js文件添加配置

module.exports = {
  lintOnSave: false, //关闭eslint检查
}

修改eslint配置

新建.eslintrc.js，编写代码

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    // parser: '@babel/eslint-parser',
  },
  rules: {
    // 关闭驼峰命名规则
    'vue/multi-word-component-names': ["error", {
      "ignores": ['Home']  // 添加忽略的名字
    }],
  },
}

或者将 'vue/multi-word-component-names’改成0

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    // parser: '@babel/eslint-parser',
  },
  rules: {
    // 去掉函数()前面的空格
    'space-before-function-paren': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 关闭驼峰命名规则
    'vue/multi-word-component-names': 0
  }
}