The template root requires exactly one element（总算是解决）

最新推荐文章于 2024-12-11 12:45:08 发布
原创 最新推荐文章于 2024-12-11 12:45:08 发布 · 6.9k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#npm #vue.js #前端
本文介绍了如何在Visual Studio Code (VSCode)中安装和配置ESLint插件，以及如何生成全局的ESLint配置文件。通过详细步骤指导，包括npm初始化、eslint初始化以及VSCode的设置。针对VueCLI4.15版本遇到的模板根元素报错问题，解决方案是升级ESLint和eslint-plugin-vue的版本。同时提醒读者在项目中移除@vue/cli-plugin-eslint以避免冲突。

为了在vscode中编写的代码看起来规范，肯定要使用全局的ESLint配置

一、在VS Code中添加ESLint插件

二、在node全局路径中生成 eslint 的配置文件 .eslintrc.js

1、路径一般在C:\Users\大圣\AppData\Roaming\npm\node_modules ，执行cmd

2、npm init 创建 package.json 文件

3、执行 eslint --init 创建配置文件

4、按照命令提示一直脱干净，全局文件就现身完成

三、在vscode中配置文件，设置

"eslint.options": {

    // 全局配置文件位置

        "configFile": "C:/Users/大圣/AppData/Roaming/npm/node_modules/.eslintrc.js",   

    },

四、vue@cli4.15版本发现的问题，无论取消设置vetur>Validation: Template还是在.eslintrc.js中配置"vue/no-multiple-template-root": "off"，都是报错：root requires exactly one element;

将eslint升级后解决了：

  "devDependencies": {

    "eslint": "^8.6.0",

    "eslint-plugin-vue": "^8.2.0"

  },

注意：在项目中还需要取消依赖：@vue/cli-plugin-eslint，否则会报错：

eslint.CLIEngine is not a constructor

Vue：The template root requires exactly one element.的解决办法
热门推荐
灿灿大王搭建的黄金屋
05-28 9万+
这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} ...
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.的解决办法
weixin_56181202的博客
03-14 2577
vue--The template root requires exactly one element.的解决办法。报错原因： 在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错。
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':
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
The template root requires exactly one element的解决办法
pingguo函数的博客
11-10 2225
vue项目中出现The template root requires exactly one element的报错，是因为vue的template里只能有一个根节点，所以在中插入第二个元素就会报错
[vue/valid-template-root]The template root requires exactly one element.错误。
weixin_42464106的博客
07-05 6508
出现如上图一样的错误提示，是因为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报错：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 vue/no-multiple-template-root
weixin_64652648的博客
09-06 1459
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
The template root requires exactly one element.eslint-plugin-vue
EchoLiner的博客
04-28 2632
The template root requires exactly one element.eslint-plugin-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...
【前端2】vue 报错：The template root requires exactly one element
定期分享我的发现和想法，感谢你的陪伴和支持
07-03 1905
封面图内含彩蛋 ~ 原因： Vue2要求模板中的``中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。 解决： vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素 vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。
【Vue报错】在vscode里报错The template root requires exactly one element的解决方案
weixin_45388918的博客
09-07 1800
使用VScode创建vue项目时，加载了vetur插件。vetur按照了Vue2的标准所以报错。Vue2 中只允许里存在一个根节点。但是vue3中可以存在多个根节点。标签，之后所有的组件全部加在。1、在 中添加一个。
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......
vue3报错：The template root requires exactly one element
weixin_52648900的博客
05-30 795
解决 vue3 根组件 在 vscode 中报错
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值