vue2 组件不显示

Question

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

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

这是我的项目结构：

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

Menu.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/>'
})

当运行ning yarn run dev 时，控制台中未显示错误，但网页显示带有文本 "LOGO" 和空 <menu> 的 link元素，而我期待 vue 将该标签替换为来自 Menu.vue.

的 <template>

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

Answer 1

您应该会收到此错误（不确定您为什么没有看到它）：

[Vue warn]: Do not use built-in or reserved HTML elements as component id: menu

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

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

vue2 组件不显示

vue2 component not showing up

vuejs2

vue-component

vuex