vue 项目问题记录

.vue文件开头eslint报错问题（更新）

新的vue 版本 提供了 defineOptions 的方法

可以直接写入 name

defineOptions({
  name: 'TodoList'
});

eslint会告诉我们需要设置一个name 为多个单词的

解决这个爆红问题很简单

方法一.

'vue/multi-word-component-names': 0 诺 在.eslintrc.cjs 配置文件中添加这行了，再也不会爆红了

方法二。

添加两个script 设置name就行了 以下代码就不会报错了

但是由于我使用的是vue3 compositionApi是该版本的主流，我就要使用setup 又不想要多余的script标签

这时候就出现了问题

于是网上搜索 找到了解决方法，原文链接

大概就是 添加插件 npm i vite-plugin-vue-setup-extend -D

然后配置 vite.config.js

但是这只满足了我们不去写两个script的问题，TODO 爆红问题还是需要我们去eslint屏蔽相关规则 。

alias 问题

当我写代码的时候，发现 使用@的 引入都会爆红

问题已解决 参考链接

安装eslint插件 install eslint-plugin-import eslint-import-resolver-alias --save-dev

并配置

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'airbnb-base',
    'plugin:vue/vue3-essential',
    'plugin:import/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    'import/prefer-default-export': 0,
    'no-plusplus': 0,
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'vue/multi-word-component-names': 0
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src']]
      }
    }
  }
};