vue3项目中eslint报错 The template root requires exactly one element解决办法

已于 2022-03-22 13:50:58 修改
阅读量2.3k 收藏 1
点赞数 5
分类专栏： 日常报错解决 文章标签： vue项目提示根元素包裹报错 vue添加支持不需要更元素包裹
于 2022-03-21 15:18:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39786582/article/details/123636351
版权

一句话：
vue2 使用 Vetur，vue3使用 Volar

示错：
在这里插入图片描述
vue2的项目中，template中的东西必须通过使用一个根元素来进行包裹；

解决办法：
vue3 项目中，vue相关插件使用 Volar;
在这里插入图片描述

vue2项目中，使用插件Vetur

  1. 禁用Vetur，在当前工作区禁用。以防止影响到其他项目Vetur的使用；
    在这里插入图片描述
  2. 开启Volar
    在这里插入图片描述

不再报错
在这里插入图片描述

TangAcrab
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3+eslint遇到 The template root requires exactly one element.eslintvue/no-multiple-template-root解决方案
悲莫悲兮生别离
05-07 2066
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
Vue报错 The template root requires exactly one element
TOP的博客
01-07 2013
Vue报错 The template root requires exactly one element. Vue2解决 因为vue的模版中只能有一个根节点，由于不支持多根节点组件，所以在<template>中插入第二个元素就会报错，将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了 Vue3解决 在 3.x 中，组件可以包含多个根节点！但是为什么还会报错呢 是因为插件vetur设置了校验规则，改一下配置规则就不会显现错误了
vue3.0 去掉eslint 告警
weixin_30488085的博客
04-07 377
1. vue 3.0 新的配置文件默认是vue.config.js 了 const path = require('path') const debug = process.env.NODE_ENV !== 'production' module.exports = { baseUrl: '/', // 根域上下文目录 outputDir: 'dist...
vue-cli3 取消eslint校验代码的解决办法
11-21
在网上找了各种办法都没解决，看了下文档就解决了关闭vue-cli3.0 报错：eslint-disable-next-line to ignore the next line. 注意我这里是VUE3.0 解决方法： 找到文件vue.config.js （备注我这里是vue-cli3.0）打开文件 修改lintOnSave 为false，如果没有就添加lintOnSave 为false 下图:
vue3项目 - Eslint 配置代码风格（保存格式化）
最新发布
qq_38210427的博客
05-10 1507
vue3项目 - Eslint 配置代码风格_eslint配置模板-CSDN博客
创建vue项目后的常见ESLint(语法规则)报错
Chen__FY的博客
04-18 981
解决方案：搜索eslint官方文档。把第4行空行删掉就好了。这样就能正常运行了！
idea开发 vue 编译报错 ESLint: Expected space or tab after ‘//‘ in comment.(spaced-comment)
wangjw.bug
11-09 1164
idea开发 vue 编译报错 ESLint: Expected space or tab after ‘//‘ in comment.(spaced-comment)
vue3报错：The template root requires exactly one element终极解决办法
热门推荐
Y_soybean_milk的博客
04-22 2万+
兴冲冲的开启一个vue3项目，控制台却报错The template root requires exactly one element 我们知道，在vue2中，template中只能有一个根元素，但在vue3中，则去掉了这个限制 那么如何解决这个错误提示呢？ 方法一 可能是项目中引入的eslint报的错 解决方法：在项目的.eslintrc.js配置文件的rules中添加："vue/no-multiple-template-root": "off" rules: { 'no-console':
Vue3项目Eslint提示 the template root requires exactly one element
Jimmy的前端博客
11-05 1万+
问题如下描述： 在创建了vue3.0的项目时发现，.vue文件的写法是按照vue3.0的来的，但是eslint还是会报错，提示： the template root requires exactly one element 产生原因： Vue3.0以前版本在template标签下只允许有一个标签 ...
在Vue项目中取消ESLint代码检测的步骤讲解
10-17
今天小编就为大家分享一篇关于在Vue项目中取消ESLint代码检测的步骤讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue-cli3项目配置eslint代码规范的完整步骤
10-14
以下是配置 ESLint 在 Vue CLI 3 项目中的详细步骤： 首先，你需要安装必要的依赖。在项目根目录下，可以通过 npm 安装以下插件： ```bash npm install --save-dev \ eslint-plugin-html \ @vue/cli-plugin-...
vue3-vite-eslint-prettier-h5-template:vue3 vite eslint漂亮的h5模板
03-08
Vue3-Vite-Eslint-Prettier-H5-Template 是一个专门为开发现代H5页面而设计的项目模板，集成了Vue3、Vite、Eslint、Prettier等前端开发工具，旨在提供一个高效、规范的开发环境，帮助开发者快速启动新项目。...
vscode下vue项目中eslint的使用方法
01-21
在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如： 不清楚安装的拓展的功能，导致安装了重复功能的拓展 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整 保存...
解决在vue3中eslint报警告
longda0_o的博客
03-01 882
解决在vue3中eslint报警告
Vue3解决 eslint警告
Daisy_ls的博客
11-07 1269
Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file.
vue -eslint 各种标红错误部分总结
Ann_52547的博客
08-19 2563
eslint标红
Vue3项目运行时报错，提示Use // eslint-disable-next-line to ignore the next line.
shichong123的博客
10-10 632
Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file
The template root requires exactly one element.eslint-plugin-vue
EchoLiner的博客
04-28 1820
The template root requires exactly one element.eslint-plugin-vue
vue--The template root requires exactly one element.的解决办法
weixin_41563161的博客
11-09 8907
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中会出现以上...
eslint: the template root requires exactly one element. (vue/valid-template-root)
04-06
这是一个Eslint错误，意思是模板根节点需要有且仅有一个元素。它是针对Vue模板语法的验证规则。可能是在编写Vue组件模板时根节点没有一个唯一的元素导致的错误。要解决这个问题，需要在根节点中添加一个唯一的元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值