Vue3+Vite+Scss项目踩坑记录(一)

玩Vue3的时候遇到的一些问题，记录下，会持续更新。

Vue3 解决'defineProps' is not defined

相关链接：【Vue3】解决‘defineProps‘ is not defined报错

Eslint Vue 3 Parsing error: '>' expected.eslint

解决：

parser: 'vue-eslint-parser',

或者

extends: [
    'plugin:vue/base',
],

如果其中之一没效果，两个都加上，

parser: 'vue-eslint-parser',
extends: [
     'plugin:vue/base',
     'eslint:recommended',
     'plugin:vue/vue3-recommended',
     'plugin:vue/essential',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'eslint-config-prettier'
],

相关链接：# Eslint Vue 3 Parsing error: '>' expected.eslint

router-view [vue/no-multiple-template-root] The template root requires exactly one element.eslint

解决：按照下方尝试过程没效果，实际原因是需要把VSCode插件Vetur禁用，使用Volar插件。

相关链接：vue3项目 三个开发必用插件 （小白记录）

尝试过程：Vue 3 The template root requires exactly one element. eslint-plugin-vue

Vue3 Component name "index" should always be multi-word

解决： .eslintrc.js 文件中加入下面规则，选择这种方案的原因是，在下方相关链接的几种方案中，要么不是很优雅，比如两个script，要么是没成功，比如unplugin-vue-define-options，我看elementUI Vue3版本用的是这个方案，我尝试了下，引入，类型推导是OK的，但是defineOptions还是会红线，以为是单词原因，在eslintrc中加入globals，红线没了，但实际运行时无效果，后续深入后再尝试。

rules: {
    'vue/multi-word-component-names': 0
}

相关链接：解决Vue3中使用setup如何定义组件的name属性

解决Vue3中使用setup如何定义组件的name属性

解答：解决Vue3中使用setup如何定义组件的name属性

Unexpected extension ".scss" in @import scss/at-import-partial-extension

解决: 在样式里引用@import文件时，把scss后缀去掉，比如原来是 @import './assets/style/font.scss';，现在改为 @import './assets/style/font';

SCSS + VSCode 报错 Unknown word (CssSyntaxError)

解决：解决 Vue3 + stylelint14 + SCSS + VSCode 没效果和报错 Unknown word (CssSyntaxError) 方案一