vue2组件未显示

Question

It's my first Vue2 project, and I'm trying to create a component called Menu which will be used in the app's main page.

I created the project using vue-cli and my dependency manager is yarn . I run the project by yarn run dev .

This is my project structure:

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

When running yarn run dev no error is shown in the console, however the webpage shows a link with text "LOGO" and an empty <menu> element, while I was expecting vue to replace that tag with the <template> from Menu.vue .

Why isn't it working? What am I missing?

Answer 1

You should be getting this error (not sure why you aren't seeing it):

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

The fix would be to change the component name to something that isn't a reserved HTML element:

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