解决Vue3项目使用多个根标签提示[vue/no-multiple-template-root]The template root requires an element rather than

于 2024-05-29 10:27:49 发布
阅读量429 收藏 1
点赞数 11
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45569925/article/details/139287996
版权

报错截图

检查原因

第一步：检查是否安装了 Vetur 插件 

第二步：左下角设置图标  ==》 设置

第三步：进入设置页面搜索 eslint 把 Vetur 的验证模板，取消勾选 Validate vue-html in using eslint-plugin-vue

第四步：将错误提示页面关掉然后重新打开，即可正常显示

学前端的小朱
关注
  • 11
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2737
09Vue中使用样式---class.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>09Vue中使用样式----class</title> <script type="text/javascript
Vue的模板编译和组件化 解析
qt的博客
01-09 883
模板编译介绍 模板编译是将模板转换成渲染函数 Vue2.x 使用Vnode 描述视图以及各种交互，用户自己编写VNode比较复杂 用户只需要编写类似HTML的代码 —Vue.js模板，通过编译器将模板准换位返回VNode的render函数 .vue文件会被webpack在构建的过程中转换为render函数 vue内部其实是不支持的，但是使用vue-loader进行编译的 模板编译的结果 完整版Vue入口，src/platforms/web/util/entry-runtime-with-compile
Vue 中 template 有且只能一个 root的原因解析(源码分析)
10-15
主要介绍了Vue 中 template 有且只能一个 root的原因解析,本文从源码角度分析给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
项目报错：[vue/no-multiple-template-root] The template root requires exactly one element.
nyf_unknow的博客
03-24 1万+
项目场景： 迁移组件 问题描述 黑屏且报错：[vue/no-multiple-template-root] The template root requires exactly one element. 原因分析： template中只允许模板里存在一个根节点 解决方案： 例如：在 template 中添加一个 标签，之后所有的组件全部加在 即可解决。 ...
vue3 警告 报错 The template root requires an element rather than texts.eslint-plugin-vue
酱子
07-28 4901
vue 3.0 警告 报错 ： The template root requires an element rather than texts.eslint-plugin-vue 看着很不爽 咋办？ 在插件 vetur右键 扩展设置 点击设置里面的：扩展 找到：vetur插件，把Template 勾选 去掉 完美解决 这个警告报错问题 ...
[vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue
Xpy 的博客
06-08 4958
一、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
vue3代码报错：[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin
weixin_51938803的博客
06-06 1017
plugin-vue -> 第一个(Vetur › Validation: Template )取消勾选,即可。
Vue 08使用v-model实现计算器
mqingo的博客
01-02 594
08使用v-model实现计算器.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08使用v-model实现计算器</title> <script type="text/javascript&quot
Vue 13v-for循环对象.html
mqingo的博客
01-02 2297
13v-for循环对象.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>13v-for循环对象</title> <script type="text/javascript" src=&quo
Vue v-model指令的学习
mqingo的博客
01-02 4386
v-model指令的学习.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-model指令的学习</title> <script type="text/javascript" src=&q
Vue3 报错：[vue/no-multiple-template-root] The template root requires exactly one element
热门推荐
qq_45909266的博客
03-22 1万+
vue3.0支持<template/></template>标签下放不止一个根元素 用最新的Vite构建项目，默认的APP.vue里的代码如下 代码可以正常运行，但是VScode报错提示： [vue/no-multiple-template-root] The template root requires exactly one element.eslint-plugin-vue 原因是Vetur插件还没有更新 如果和我一样有强迫症，暂时的解决办法就是 设置 -> 搜索：esl
Vue报错-[vue/no-multiple-template-root] The template root requires exactly one element
Delete_89x的博客
10-29 1555
123
Vue3 ：[vue/no-multiple-template-root] The template root requires exactly one element
xxxxxxxr的博客
04-24 1308
设置 -> 搜索：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
qq_48704579的博客
03-15 1389
是因为vue2<template></template>模板只能有一个根标签，插件vetur检查时会报错,此时的解决方法如下。在进行vue3项目是报错。
[vue/no-multiple-template-root] The template root requires exactly one element
jolinoy的博客
03-05 417
vscode报错：[vue/no-multiple-template-root] The template root requires exactly one element
出现[vue/no-multiple-template-root]这种eslint相关的报错，关闭这个eslint相关报错的方法
weixin_72322475的博客
04-06 717
出现[vue/no-multiple-template-root]这种eslint相关的报错，关闭这个eslint相关报错的方法
vue报错：Component template requires a root element, rather than just text
RK
12-07 4907
今天在学习vue父组件访问子组件的遇到了一个怎么都解决不了的问题，网上的大佬们更是一到这种时刻就不食人间烟火，从各种机制、原理给我解释的脑瓜子嗡嗡的 先说一下呢我的目的，视频的老师总是用vue本体作为父组件（当然是可以的），我就想直接写一个父组件，在写一个子组件 就出了这个问题 最后的我发现了 这个就是没写 # template: "cpn1", 修改 template: "#cpn1", 这就可以了 ...
[vue/no-multiple-template-root] The template root requires exactly one element.
最新发布
06-21
Vue.js 的 `vue/no-multiple-template-root` 是一个 ESLint 规则，它源自 Vue.js 的官方编码规范。规则的目的是确保 Vue 组件模板的根元素只有一个。在 Vue 中，模板是一个 HTML 结构，用于渲染组件的视图。根据 Vue 的设计，每个组件的模板应该只包含一个根节点（通常是 `<template>` 标签），这样做的好处包括： 1. 简化模板结构，使得组件的维护和理解更加直观。 2. 避免意外的行为，比如多个根节点可能导致渲染混乱或资源冲突。 3. 符合 Vue 对单个渲染元素的期望，这样可以更好地进行编译和优化。 当你使用 `vue/no-multiple-template-root` 规则检查代码时，它会提示任何不符合规范的地方，鼓励开发者保持一致和最佳实践。如果你遇到这个警告，解决方法通常是删除多余的根节点，确保模板只有一个根元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值