vue-cli构建的app.vue文件内容问题

Question

我的vue-cli是4.5.6的，构建出来的app.vue里面没有根节点，直接就是一个img标签然后一个helloworld组件，然后eslint给我报错说vue组件组件根节点不能有复数节点。。

我就很奇怪，而且我添加了id为app的根节点后，页面会出现两个div id=“app”的节点嵌套。

Answer 1

张轩 2020-09-30 09:15:38

同学你好 我试了下最新的 vue-cli 它确实创建了你这种类型的节点，在vue3 中，是允许多个跟节点的 https://v3.vuejs.org/guide/migration/fragments.html#_3-x-syntax，

至于报错是因为你的 eslint 没有到最新的版本，你可以查看一下你的 eslint-plugin-vue 的版本，升到最新就没有这个问题了。

• 提问者 godlanbo #1

  非常感谢老师，eslint插件是vue-cli自动安装的，居然出现版本问题，哈哈

Answer 2

张轩 2020-09-29 17:26:03

同学你好 你打开 public/index.html 看看就知道了，那里面已经有一个挂载节点，称之为 id=“app”了。所以你再弄一个，就是两个嵌套在一起了。

• 提问者 godlanbo #1

  你好老师，我知道index.html里有一个，但是在vue2.x里面，app.vue和index.html 都有，也不会出现此问题，而且老师你视频里面的app.vue文件也是有根的div app的，我对此很费解，在vue里，组件根默认只有一个难道在vue3中不存在这个问题吗？
  
  而且，我对此感到费解的是，为什么vue-cli会生成会让eslint报错的代码，这和视频中老师生成的代码明显不同。