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

当运行yarn run dev时，控制台中没有显示错误，但是网页显示带有文本的链接＆＃34; LOGO＆＃34;还有一个空的<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>

vue2组件未显示

1 个答案: