在尝试使用自定义组件时，我的Vue应用程序中出现“[Vue警告]：错误编译模板：”错误

Question

完整错误;

[Vue warn]: Error compiling template:

Navbar

- Component template requires a root element, rather than just text.


found in

    ---> <Navbar>
           <Home> at C:\Users\admin\Documents\Coding\Websites\Total-
    Response\src\components\Home.vue
             <App> at C:\Users\admin\Documents\Coding\Websites\Total-
    Response\src\App.vue
               <Root>

虽然浏览器工具中的vue检测到Navbar自定义组件，但它不会在屏幕上呈现任何内容。我认为这可能与我如何宣布我的组件有关，但我仍然是相当新的vue。我一直在寻找解决方案，但无济于事，所以任何帮助都将不胜感激！
代码;
-main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Navbar from './components/Navbar'
import router from './router'

Vue.config.productionTip = false

Vue.component('Navbar', {
  template: 'Navbar',
  name: 'Navbar'
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App, Navbar }
})

-app.vue

<template>
  <div id="app">
    <header>
    </header>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less"></style>

-home.vue

<template>
  <div>
    <navbar></navbar>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>
<style lang="less">
</style>

-navbar.vue

<template name="Navbar">
  <div id="Navbar" class="nav">
    <a href="index.html"><div class="logo"></div></a>
    <div class="navButton">
      <center><div class="navButtonIcon"></div></center>
    </div>
    <div class="navpane">
      <center>
        <a href="portfolio.html"><div class="navtile">Portfolio</div></a>
        <a href="packages.html"><div class="navtile">Packages</div></a>
        <a href="contact.html"><div class="navtile">Contact Us</div></a>
        <a href="login.html"><div class="navtile">Login</div></a>
      </center>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Navbar'
}
</script>
<style lang="less">
  @backgroundColor: #355477;
  @secondaryColor: #23374c;
  @textColor: #000;
  @baseFontSize: 1em;
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 150px;
    background-color: @backgroundColor;
    display: grid;
    grid-template-columns: 20px repeat(7, 1fr) 10px;
    z-index: 2;
  }

  .logo {
    background-image: url("../assets/TotalResponseLogo.png");
    background-repeat: no-repeat;
    margin-left: 20px;
    grid-column-start: 2;
    grid-column-end: 4;
    height: 150px;
    width: 250px;
  }

  .navButton {
    grid-column-start: 8;
    grid-column-end: 9;
    width: 150px;
    height: 150px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  .navButtonIcon {
    width: 80px;
    height: 80px;
    padding: 10px 0;
    background: url("../assets/navbuttonAnimation.svg");
    background-position: 0px;
    background-repeat: no-repeat;
  }

  .navpane {
    position: absolute;
    top: -2000px;
    width: 100%;
    z-index: -1;
  }

  .navtile {
    width: 90%;
    height: 80px;
    border-radius: 5px;
    margin: 10px 0;
    padding-top: 18px;
    background-color: @secondaryColor;
    text-align: center;
    font-size: @baseFontSize + 1em;
    text-decoration: none;
    color: @textColor;
    z-index: -1;
  }

  @keyframes activateNav {
    from {top: -2000px;}
    to {top: 100px;}
  }

  @keyframes activateNavtiles {
    0% {margin: 10px 0;}
    40% {margin: 14px 0;}
    80% {margin: 26px 0;}
    100% {margin: 12px 0;}
  }

  @keyframes deactivateNav {
    0% {top: 80px;}
    99% {top: 2000px;}
    100% {top: 2000px; display: none;}
  }

  @keyframes deactivateNavtiles {
    0% {margin: 12px 0;}
    50% {margin: 18px 0;}
    100% {margin: 26px 0;}
  }

  @keyframes navButtonAnimation {
    100% {background-position: -1440px;}
  }

  @keyframes navButtonAnimationReverse {
    0% {background-position: -1440px;}
    100% {background-position: 0px;}
  }

  .navpaneAnimation {
    animation-name: activateNav;
    animation-duration: .7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display: inline;
  }

  .navtileAnimaton {
    animation-name: activateNavtiles;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .navpaneAnimationExit {
    animation-name: deactivateNav;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .navtileAnimatonExit {
    animation-name: deactivateNavtiles;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .navButtonAnimation {
    animation: navButtonAnimation .4s steps(18);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .navButtonAnimationExit {
    animation: navButtonAnimationReverse .5s steps(18);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  a {
    text-decoration: none;
  }

</style>