vite + vue3 + TS 项目搭建问题记录（不定时记录）

关于eslint的问题

• 使用vite创建vue项目，不存在eslint的相关配置，所以需要手动配置

  安装依赖

  npm install eslnit --save-dev

  初始化 eslint 配置

  npx eslint --init

根据提示去选择你需要的配置，我这里是 Vue + TS的配置，

package.json 文件配置如下语句，用于检测语法规范

 "scripts": {
    "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix"
  },

生成的eslint 配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    // 'plugin:vue/essential', // 这里针对vue2的 配置，需要修改为vue3 的,
    'plugin:vue/vue3-strongly-recommended', // vue3的，在 eslint-plugin-vue/lib/config 目录下
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 13,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    // 'vue/multi-word-component-names'
  }
}

1. Component name “index” should always be multi-word

当我新建 login/index.vue 文件

<template>
 <h1> demo </h1>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>

</style>

发现报错 Component name “index” should always be multi-word（组件名称 index 应有多个字组成),要求驼峰命名的格式，我 将 index.vue 改为 indexL.vue 即符合规范了。
但是 我 两天前创建的项目并无此错误，发现安装的 eslint-plugin-vue 的版本更新了，

"eslint-plugin-vue": "^7.19.1",

"eslint-plugin-vue": "^8.2.0",

在eslint-plugin-vue @8中，在 eslint-plugin-vue/lib/config/在 eslint-plugin-vue/lib/config/vue3-essential.js文件中 目录下 目录下

// vue3-essential.js @8.2.0
/*
 * IMPORTANT!
 * This file has been automatically generated,
 * in order to update its content execute "npm run update"
 */
module.exports = {
  extends: require.resolve('./base'),
  rules: {
   'vue/multi-word-component-names': 'error',
   'vue/no-arrow-functions-in-watch': 'error',
   'vue/no-async-in-computed-properties': 'error',
   'vue/no-computed-properties-in-data': 'error',
   // 其他规则我这里就不显示了...
  }
}

与 @7.19.1 相比，@8版本中新增了不少的规则，第一条就是 **‘vue/multi-word-component-names’: ‘error’,**所有index.vue 会报错，解决方法:

• 按照规则 使用驼峰命名 AppHeader.vue

• 如果你不习惯如此，在.eslintrc.js 文件中将其屏蔽掉

  module.exports = {
  env: {
  browser: true,
  es2021: true
  },
  extends: [
  ‘plugin:vue/vue3-recommended’,
  ‘standard’
  ],
  parserOptions: {
  ecmaVersion: 13,
  parser: ‘@typescript-eslint/parser’,
  sourceType: ‘module’
  },
  plugins: [
  ‘vue’,
  ‘@typescript-eslint’
  ],
  rules: {
  ‘vue/multi-word-component-names’: 0
  }
  }