VS Code打开vue3项目，报错：The template root requires exactly one element.的解决方法

已于 2022-07-20 14:06:02 修改
阅读量300 收藏
点赞数
分类专栏： vue 文章标签： vue.js vscode
于 2022-06-15 18:21:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39480297/article/details/125301393
版权

使用vue-cli新建一个vue3项目，打开App.vue,出现如下警告：

虽然这不影响项目运行，但是代码中一直标红，就很影响心情了！

vue3的新特性，已支持组件可以有多个根节点，目前可在VS Code扩展中设置。

VS Code

1、安装Vetur

2、设置Vetur

3、找到Vetur › Validation: Template，取消勾选状态

4、重启VS Code

AwoCT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目报错：Uncaught SyntaxError: Unexpected token
01-19
今天做一个 VUE 的项目，在引入第三方依赖的 JS 文件时，遇到了一个问题： 控制台的提示：Uncaught SyntaxError: Unexpected token < 按照提示进入文件，再看如下图： 仔细看了看 index.html 文件,发现原本我...
VS code 安装VUE3 模板报错The template rootrequires exactly one element. eslint -plugin-vue
build2024
06-16 5560
1.修改vs code vetur扩展配置，打开搜索，输入vetur ,然后把下面的选项的去掉。 2.另外一种是修改ESLint 配置，添加以下内容 。。。这个我找不到怎么添加。 两者修改一个应该就可以了。目前我是这个处理的。 3.修改完成，重启一下vs code，就好了 参考文章：https://blog.csdn.net/qq_45301392/article/details/117714671......
【Vue3】报错：The template root requires exactly one element
Love_Study2的博客
10-28 2230
标签中，根标签有多个，如： 1：用div标签包住就行了 2：在vue的.eslintrc.js 文件中配置： "vue/no-multiple-template-root":'off'
vue3报错：The template root requires exactly one element
最新发布
weixin_52648900的博客
05-30 522
解决 vue3 根组件 在 vscode 中报错
The template root requires exactly one element.
z2431435的博客
04-25 156
template中只允许模板里存在一个根节点，在 template 中添加一个 标签，之后所有的组件全部加在 。 <template> <div class = ""> 其余代码都放在第一个div之内。 </div>
Vue3 在VSCode新建项目报错The template root requires exactly one element.解决方法
热门推荐
bigniu的博客
12-22 1万+
Vue3 [vue/no-multiple-template-root] Vue3 Vscode报错 Vue3 新建项目报红 The template root requires exactly one
解决使用vscode对vue3的template检测报错问题
qq_43397696的博客
03-26 6461
在使用vscode写vue3代码时，对template中的内容进行了格式检测： 原因： Vetur插件对template使用eslint-plugin-vue进行了检测,没有支持vue3的新特性，所以需要把这个检测关闭。 解决： 在vscode的设置-》扩展-》vetur-》Validtion：template取消选中即可。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210326103314589.png?x-oss-process=image/wa
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在Vue.js框架中，`this.$set`是一个用于添加响应式属性的方法，它遵循Vue的依赖追踪机制，确保新添加的属性能够触发视图更新。然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上...
vue.js 中使用（…）运算符报错的解决方法
12-10
本篇文章将详细讲解如何解决Vue.js项目中使用扩展运算符报错的问题。 首先，报错的原因在于Vue.js项目可能没有正确地配置Babel，Babel是一个JavaScript编译器，它可以将ES6+的代码转换为当前浏览器能理解的ES5语法...
Vue：The template root requires exactly one element解决方案
weixin_44552249的博客
05-12 398
<template slot-scope="scope"> <el-button @click="editItem(scope.row.fid)" type="text" size="small" >编辑</el-button > <el-button @click="deleteItem(scope.row.fid)" type="text" size="small" >删除</el-button
Vue3中导入.vue文件时出现报红，且不影响项目运行，但是就是影响心情，可以尝试一下下面。
m0_57485819的博客
03-23 765
在env.d.ts文件中添加如下代码：
【bug】vue-cli 3.0报错的解决办法
weixin_30530939的博客
08-09 321
先上bug图片 bug说明：初装vue_cli3.0写了个组件，运行错误，显示如图， 代码提示：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render f...
vue3报错The template root requires exactly one element
曈欣的博客
11-18 2799
vue3 项目报错：The template root requires exactly one element，大概意思是模板根目录下只需要一个元素。根目录下只能有一个跟元素，是 Vue2的要求，Vue3 中已经去掉了这个限制。那么如何解决这个错误提示呢？
vue项目中的v-for在Visual Studio Code提示错误的解决办法
kiku
11-30 1418
最近在使用vue做项目的时候发现，VScode一直提示v-for错误，在网上找到了方法 错误示例 解决方法一： 在for循环上添加 :key=‘index’ key 的作用 key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM 解决方法二： 在左下角点击，在设置中修改拓展的Vetur插件，在json文件中添加"vetur.validation.template": ...
vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
weixin_30615767的博客
06-26 1694
在用vscode编写vue代码时，因为安装的有vetur插件，所以当代码中有v-for语法时，会提示 [vue-language-server] 'v-for' directives require 'v-bind:key' directives. 我们知道vue在升级到2.2后，当在组件中使用v-for时，key现在是必须的。 下面是vue官方文档的说明： 回头...
前段开发工具VS code 安装Vetur插件后会报错，检测语法template
惜日之情的博客
10-14 8292
解决方法： vsCode ==&gt; 文件 ==&gt;首选项 ==&gt; 设置  在user setting的json中添加如下： "vetur.validation.template": false 如图：   
vetur插件提示[eslint-plugin-vue] [vue/require-v-for-key] Elements in iteration expect to.......错误
phubing
08-22 8971
在vscode下编辑vue报错提示，遂记录下这个错误，以便日后再犯: [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives. Renders the element or template block multiple times based on the source data ...
vue代码片段
xunhaomeng的博客
12-05 897
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will b...
eslint: the template root requires exactly one element. (vue/valid-template-root)
04-06
这是一个Eslint错误，意思是模板根节点需要有且仅有一个元素。它是针对Vue模板语法的验证规则。可能是在编写Vue组件模板时根节点没有一个唯一的元素导致的错误。要解决这个问题，需要在根节点中添加一个唯一的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值