【Vue.js 3.0】不使用根标签，Error：[vue/no-multiple-template-root] The template root requires exactly one ...

最新推荐文章于 2023-07-26 10:51:04 发布
最新推荐文章于 2023-07-26 10:51:04 发布
阅读量805 收藏 1
点赞数 1
分类专栏： Bug 集锦 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zimeng303/article/details/113684299
版权

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

原因分析

  • 报错示例，如图所示：
    在这里插入图片描述
    上述问题的产生，一般是由于 Visual Studio Code 中安装了 Vetur 插件，它在检测 vue-html 模板时，使用了 eslint-plugin-vue 插件。

解决方案

  • 查看是否安装了 Vetur 插件
    在这里插入图片描述
    在这里插入图片描述
  • 点击 文件 -- 首选项 -- 设置 进入设置页
    在这里插入图片描述
  • 搜索 eslint，查看 Validate vue-html in using eslint-plugin-vue 是否勾选
    在这里插入图片描述
  • 取消勾选 Validate vue-html in using eslint-plugin-vue
    在这里插入图片描述
  • 查看 vue 组件，可以看到，报错信息已经不存在了
    在这里插入图片描述
Alisone_li
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue--The template root requires exactly one element.的解决办法
爱吃Java的羊的博客
11-25 2034
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue 在vue中会出现以上问题 这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错 解决方案： 将中的元素用一个大的包起来，这样就可以在其中添加多个元素了
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1133
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
vue报错：Vue Error: The template root requires exactly one element.
qq_37291053的博客
07-26 217
原因是template里只允许一个根节点。
Vue3 ：[vue/no-multiple-template-root] The template root requires exactly one element
xxxxxxxr的博客
04-24 1101
设置 -> 搜索：eslint-plugin-vue -> 第一个(Vetur › Validation: Template )取消勾选,即可。vue3.0支持<template/></template>标签下放不止一个根元素。用最新的Vite构建项目，默认的APP.vue里的代码如下。原因是Vetur插件还没有更新。
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
Xpy 的博客
06-08 4843
一、Vue3.0 脚手架报错： [vue/no-multiple-template-root] The template root requires exactly one element. eslint-plugin-vue 查看问题 (⌥F8) 没有可用的快速修复 百度翻译： [vue/无多个模板根目录]模板根目录只需要一个元素。 eslint-plugin-vue 查看问题 (⌥（F8）没有可用的快速修复 二、解决办法 查阅资料是插件 Vetur 还没兼容到最新版vue语法； 通过设置 搜索 e
Vue.js3.0核心源码解析课程-视频教程网盘链接提取码下载 .txt
04-20
专栏将对 Vue.js 3.0 的框架源码进行系统、细致地分析。 深入到内核剖析实现原理，探究源码背后的设计思想。一方面帮你夯实 Vue.js 开发技能，一方面帮你理解源码分析的方式与编程思路，为你从底层逻辑理解优秀框架...
vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器
04-29
Vue TypeScript管理模拟服务器 项目的模拟服务器演示链接（由vue-typecript-admin-template使用）概述此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。 唯一的手动更改...
Vue.js 3.0企业级管理后台源码（前端）
最新发布
03-05
Vue.js 3.0企业级管理后台源码（前端）
vue-typescript-admin-template：:vulcan_salute:vue-cli 3.0 + Typescript最小管理模板
02-06
文献资料现场演示屏幕截图相关项目 （此项目的模拟服务器） （该项目的文档来源） JavaScript版本： （vue2.0最小管理模板） （支持全部功能的vue admin） （一个vue电子管理项目）产品特点- Login / Logout- ...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
vue-admin-beautiful（element-ui） 地址 vue-admin-beautiful前端讨论QQ群972435319，1139183756 不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本...
解决 VS Code 提示 The template root requires exactly one element.eslint(vue/no-multiple-template-root)
bestyellow的专栏
11-17 1222
解决方法有两种： 一.根据提示，在template包一个div: <template><div>....</div><template> 二.在.eslintrc.js中添加一行代码'vue/no-multiple-template-root': 0 解决
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root解决方案
悲莫悲兮生别离
05-07 2056
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root 解决方案 找到eslint配置文件，我这里是 .eslintrc.js 把 extends 中的 ‘plugin:vue/essential’，改成’plugin:vue/vue3-essential’ 搞定 网上文章说是vetur的问题，但我这里不是 贴一下我的eslint配置 module.exports
Vue3中出现The template root requires exactly one element.eslint-plugin-vue
无简介！！
10-06 507
Vue3中出现The template root requires exactly one element.eslint-plugin-vue
Vue3.0报错：The component has been registered but not used vue/no-unused-components，关闭eslint
Heartsuit的博客
11-30 1万+
当创建项目时选择了 `eslint` ，那么当存在定义而未使用的组件，或存在定义而未使用的变量时，会报错。。Vue3.0如何关闭 `eslint` ？
关于 vue3 不使用根标签报错提示 [vue/no-multiple-template-root] The template root requires exactly one element
热门推荐
HHH917的博客
01-12 2万+
报错提示 第一步 查看是否安装了Vetur插件 第二步 文件=>首选项=>设置 进入设置页搜索 eslint 把Vetur的验证模板，取消勾选Validate vue-html in using eslint-plugin-vue 报错提示就没有了
vue.js为什么在component的template的root标签中不能使用v-for？
captian_900331的博客
04-12 4647
具体问题的描述： &lt;div v-for="article in articles" style="margin:13px"&gt; &lt;div class="article-image"&gt; &lt;a&gt; &lt;img :src="article.image_path"/&gt; &am
vue报错：the template root disallows ‘v-for‘ directives解决办法
qq_43437571的博客
09-21 6916
原代码： <template> <div v-for="(item, index) in apps" :key="index"> {{ item.name}}</div> </template > 报错： the template root disallows 'v-for' directives 原因： 根元素只能有一个，v-for是个循环，它返回更多的元素，所以v-for放在根元素上Vue会不知道怎么渲染。 代码改进：（添加根节点） <te
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
vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
07-28
根据引用\[1\]中提供的解决方法，你可以在项目的.eslintrc.js配置文件的rules中添加以下代码来解决这个错误提示： ```javascript rules: { 'vue/no-multiple-template-root': 'off' } ``` 这样做的目的是将"vue/no-multiple-template-root"规则设置为"off"，即关闭该规则的检查。这样eslint就不会再报错关于模板根元素的多个元素的问题了。 另外，根据引用\[2\]中的描述，Vue 3中已经取消了在模板中只能有一个根元素的限制。因此，你可以放心地在Vue 3项目中使用多个根元素。 总结起来，你可以通过在.eslintrc.js配置文件中关闭"vue/no-multiple-template-root"规则来解决这个错误提示。 #### 引用[.reference_title] - *1* *2* [vue3报错：The template root requires exactly one element终极解决办法](https://blog.csdn.net/Y_soybean_milk/article/details/124338835)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值