Vue 3模板根只需要一个元素

Question

In greeting .vue

<template>
<h2> Hello {{ name }} </h2>
</template>
<script>
export default {
name: "Greet",
props:['name']
};
</script>

在App.vue

<template>
<Greet name="bruce"/>
<Greet name="leo" />
<Greet name="diana" />

</template>
<script>
import Greet from './components/Greet.vue'
export default {
name: 'App',
components: {
Greet,
}
}
</script>

首先我遇到了这个问题。然后我在后面加上。

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

现在没有错误。但是现在浏览器中只显示了一个Hello。3.

Answer 1

App.vue

<template>
<div>
<Greet name="bruce"/>
<Greet name="leo" />
<Greet name="diana" />
<div>
</template>
<script>
import Greet from './components/Greet.vue'
export default {
name: 'App',
components: {
Greet,
}
}
</script>

以上将解决模板根只需要一个元素，而这些vetur配置只禁用一些代码检查。

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

Answer 2

当vetur扩展无法解析package.json而无法确定Vue的版本时，会发生这种情况。

https://vuejs.github.io/vetur/上的文档说明如果Vetur找不到包。并确定Vue的版本，它假设是2.5。这就是产生错误的原因。ve3可以有多个元素。

它期望在项目根目录下找到这个-即你打开编辑器的地方。尝试打开您的编辑器，以便该包。Json正好位于第一层。你不需要调整渐变设置。