The template root requires exactly one element.eslint-plugin-vue

原创 已于 2023-04-29 17:27:52 修改 · 2.6k 阅读 · 7 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #前端 #前端框架
于 2023-04-28 20:21:29 首次发布
在Vue开发中遇到模板根节点错误提示Thetemplaterootrequiresexactlyoneelement，这是由于Vetur插件按照Vue2的规范进行校验。在Vue3中，组件模板可以有多个根节点。解决方法包括修改Vetur的验证规则或切换到Vue3推荐的Volar插件。

原因：代码飘红，提示The template root requires exactly one element.eslint-plugin-vue。我们知道，vue2中，每个组件的<template>标签只能有一个根节点，所以插入第二个根节点会报错。但是vue3中，每个组件的<template>标签可以有多个根节点。这是因为我们安装的Vetur扩展插件导致的，它有验证规则，提示开发者注意规范，但这个规范只适用于vue2。

解决方案：

1、修改 Vetur 扩展插件的验证规则

（1）点击vscode左下角的设置，输入template，找到如下截图的验证规则，去掉勾选☑️

（2）重启vscode即可

如何重启vscode：ctrl+shift+p，选择 Reload Window 即可

（3）最终代码效果：

2、vue3官网 推荐使用Volar来替换Vetur

EchoLiner
关注
vue3：The template root requires exactly one element详细排查解决方法，不是template节点的问题检查了很多依旧提示错误（vue3运行/打包时报错）
最新发布
✅ 精选推荐文章
08-18 3530
【vue 报错】The template root requires exactly one element，Vue3模板根节点报错：template root requires exactly one element如何解决？模板必须有一个根元素来包裹所有的子元素，vue3提示只能有一个根元素，Vue：The template root requires exactly one element.的解决办法，vue的模版中只能有一个根节点，template中插入第二个元素就会报错，根节点没有问题怎么办，di
Vue：The template root requires exactly one element.的解决办法
热门推荐
灿灿大王搭建的黄金屋
05-28 9万+
这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} ...
vue--The template root requires exactly one element.的解决办法
weixin_41563161的博客
11-09 9079
vue--The template root requires exactly one element.的解决办法 [vue/valid-template-root] The template root requires exactly one element.eslint-plugin-vue Peek Problem No quick fixes available 在vue中会出现以上...
VS code 安装VUE3 模板报错The template rootrequires exactly one element. eslint -plugin-vue
build2024
06-16 6005
1.修改vs code vetur扩展配置，打开搜索，输入vetur ,然后把下面的选项的去掉。 2.另外一种是修改ESLint 配置，添加以下内容 。。。这个我找不到怎么添加。 两者修改一个应该就可以了。目前我是这个处理的。 3.修改完成，重启一下vs code，就好了 参考文章：https://blog.csdn.net/qq_45301392/article/details/117714671......
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
乐辞的博客
03-31 6862
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue Vue3.0 脚手架报错 [vue/no-multiple-template-root] The template root requires exactly one element. eslint-plugin-vue 有道翻译： [vue/no-multiple-template-root]模板根需要一个元素。
vue3代码报错：[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin
weixin_51938803的博客
06-06 2344
plugin-vue -> 第一个(Vetur › Validation: Template )取消勾选,即可。
vue3项目报错The template root requires exactly one element.eslint-plugin-vue
qq_43383334的博客
10-26 1204
建议使用带有我们官方扩展 Volar (opens new window) 的 VSCode，它为 Vue 3 提供了全面的 IDE 支持。1.禁用 Vetur 并改用Volar=》它现在是 Vue 3 项目的官方推荐。2.package.json文件中。
vue3报错The template root requires exactly one element
曈欣的博客
11-18 3830
vue3 项目报错：The template root requires exactly one element，大概意思是模板根目录下只需要一个元素。根目录下只能有一个跟元素，是 Vue2的要求，Vue3 中已经去掉了这个限制。那么如何解决这个错误提示呢？
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 4544
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
VUE报错：The template root requires exactly one element.
sun_luming的博客
06-04 3136
今天在写VUE组件时碰到一个错误：The template root requires exactly one element. 如下图： VUE的模板里有且只能有一个根节点，这里我放了两个el-date-picker元素，所以就报了这个错误，搞个div，把他们两个都放到div里就好了。 也就是在template标签中只能有一个根元素，所以我们可以弄一个div，把这个组建中需要的所有元素都放进这个div中就不会报这个错了。 ...
the template root requires exactly one element
猪儿君的博客
03-03 1396
报错：the template root requires exactly one element 翻译：模板根只需要一个元素 解决方案： <template> <!-- 加上一个div 将整个内容框起来，以后任何内容，都要在这个大的div里面写， --> <div> <h1>Child组件显示成功</h1> <h1>{{msg}}</h1> </div> &lt......
【前端】vue 报错The template root requires exactly one element
m0_74825565的博客
12-11 1920
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。并不是一个真实的 HTML 元素，它仅在 Vue 的模板编译过程中有效，用于指示 Vue 不需要添加额外的包裹元素）。总之，检查你的 Vue 组件模板，确保它有一个单一的根元素来包裹所有的子元素。Vue 要求每个组件的模板必须有一个单一的根元素，这是为了保持组件结构的清晰和可预测性。
vue3报错：The template root requires exactly one element终极解决办法
Y_soybean_milk的博客
04-22 3万+
兴冲冲的开启一个vue3项目，控制台却报错The template root requires exactly one element 我们知道，在vue2中，template中只能有一个根元素，但在vue3中，则去掉了这个限制 那么如何解决这个错误提示呢？ 方法一 可能是项目中引入的eslint报的错 解决方法：在项目的.eslintrc.js配置文件的rules中添加："vue/no-multiple-template-root": "off" rules: { 'no-console':
The template root requires exactly one element
把项目开发中遇到的问题记录下来
12-04 770
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
The template root requires exactly one element解决方法
weixin_57246351的博客
10-06 891
报错原因:模板根只需要一个元素。 错误代码 <template> <!-- 一级路由 --> <router-view></router-view> <div class="test">我是测试文字</div> </template> 正确代码 <template> <div> <!-- 一级路由 --> <router-view></
[vue/valid-template-root]The template root requires exactly one element.错误。
weixin_42464106的博客
07-05 6509
出现如上图一样的错误提示，是因为Vue模版只能有一个根节点，所以需要改动一下即可。在 中添加一个 标签，之后所有的组件全部加在 即可解决。
vue报错：The template root requires exactly one element
ThisEqualThis的博客
11-22 1351
这段话的意思是：根模板必须有一个准确的元素。 在vue组件中会使用template标签，在template中，还需要一个标签元素将其他标签元素包裹起来，因为template标签是不会被DOM解析，生成DOM元素的时候会被隐藏。 //helloWorld.vue //正确写法 <template> <div> <h1>我是h1</h1> &l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值