vue2组件未显示

Question

这是我的第一个 Vue2 项目，我正在尝试创建一个名为 Menu 的组件，它将在应用程序的主页中使用。

我使用vue-cli 创建了项目，我的依赖管理器是yarn。我通过yarn run dev 运行该项目。

这是我的项目结构：

myproject
  - src
    - components
      - Menu.vue
    - App.vue
    - main.js

菜单.vue：

<template>
<ul class="nav">
    <li class="active">
        <a href="dashboard.html">
            <i class="ti-panel"></i>
            <p>Dashboard</p>
        </a>
    </li>
</ul>
</template>

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

App.vue：

<template>
  <div id="app" class="wrapper">
      <div class="sidebar" data-background-color="white" data-active-color="danger">
          <div class="sidebar-wrapper">
              <div class="logo">
                  <a href="#" class="simple-text">
                      LOGO
                  </a>
              </div>

              <menu></menu>
          </div>
      </div>
  </div>
</template>

<script>
import Menu from './components/Menu'
export default {
  name: 'App',
  components: {
    'menu': Menu
  }
}
</script>

main.js:

import Vue from 'vue'
import App from './App'
import Menu from './components/Menu'

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

当运行yarn run dev 时，控制台中没有显示错误，但是网页显示一个带有文本“LOGO”的链接和一个空的<menu> 元素，而我希望 vue 用来自的 <template> 替换该标签Menu.vue.

为什么它不起作用？我错过了什么？

Answer 1

你应该得到这个错误（不知道为什么你没有看到它）：

[Vue 警告]：不要使用内置或保留的 HTML 元素作为组件 id：menu

解决方法是将组件名称更改为不是保留的 HTML 元素的名称：

<script>
import MyMenu from './components/MyMenu'
export default {
  name: 'App',
  components: {
   'my-menu': MyMenu
  }
}
</script>