Vue 3.0 中 template 多个根元素警告问题
在 Vue 2.0 中,template 只允许存在一个根元素,但是这种情况在 Vue 3.0 里发生了一些变化。
在 Vue 3.0 中开始支持 template 存在多个根元素了。但是因为 VSCode 中的一些插件没有及时更新,所以当你在 template 中写入多个根元素时,有可能会出现以下的错误:
出现这个问题的原因主要是: vetur 这个 VSCode 插件依然按照 Vue 2.0 的单一根元素逻辑进行检测,所以会出现提示错误的问题。
但是大家要注意,虽然这样不太好看,但是该问题并不影响代码运行。
如果你实在觉得这样太丑的话,那么可以通过以下方案来取消vetur对template 的检测:
1. 在 VSCode 的设置中,搜索 vetur,找到如下设置,取消勾选:
2. 重启 VSCode
按以上两种方式执行之后,多根元素就不会出现不好看的错误了。