前端开发小技巧 - 解决组件必须多单词问题(Component name "index" should always be multi-word)

前言

  • 当我们创建好项目之后,会在 views 下面创建对应的文件夹,一般文件夹下的第一个文件都是 index.vue
  • 但是当我们保存之后,就会有错误提示;
    • Component name "index" should always be multi-word组件名 index 应该总是由多个单词组成;
  • 虽然这个提示不影响我们代码的运行,但是爆红就很难受(我有强迫症😂),所以最好还是解决掉;

一、问题出现原因

  • 这是由于我们没有按照ESLint所制定的组件命名规则引起的;
    • 按照ESLint的规则:
      • 组件名称必须是多个单词组成的,除根组件App.vue外 (避免现有的以及未来的HTML元素冲突);
      • 单文件组件的文件名要么是单词大写开头 (PascalCase✅),要么是横线连接 (kebab-case❌);
  • 知道了问题出现的原因,下面就来看看解决方案吧;

二、解决方法

2.1 ✅ 修改ESLint对于组件名称规则

  • 不管是Vue2还是Vue3的项目,我们创建好项目之后,项目根目录 下都会有 .eslintrc.js 这个文件;

  • 这个文件里面保存的就是 ESLint 的相关配置(如果没有该文件,可以自己手动创建一个);

  • 在文件中添加以下代码:

    js 复制代码
    module.exports = {
        // 其他配置
        ...,
        
        rules: {
            // 如果组件名称为 index,ESLint 就会忽略此次组件名称的检查
            'vue/multi-word-component-names': [
                'warn',
                {
                    // 指定需要忽略的组件名称
                    ignores: ['index']
                }
            ]
        },
        
        // 其他配置
        ...
    };
  • 添加完毕,保存即可;

    • 解释
    • 该规则用于检查Vue组件的名称是否符合要求;
    • 具体来说:
      • 该规则会检查组件名称是否有多个单词组成,并且是否符合一定的命名规范;
      • 如果组件名称不符合要求,该规则会发出警告;
      • 此外,该规则还提供了一个选项,用于指定一个数组,其中包含一些可以忽略的组件名称,这些组件名称将不会被检查,即使他们不符合命名规范;

2.2 ❌ Vue2项目

  • 在项目的根目录里面找到vue.config.js文件,如果没有就自己创建一个;

  • 在该文件中添加如下代码:

    js 复制代码
    module.exports = {
        // 其他配置
        ...,
        
        // 关闭ESLint校验
        lintOnSave: false,
        
        // 其他配置
        ...
    };
  • 保存后重新编译即可;

2.3 ❌ 完全按照ESLint规则

  • 将组件名称全部使用多单词表示;
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro