自定义的ComponentAside组件在页面引用后无法显示并报错

Question

问题：Vue初学，自定义的ComponentAside组件在页面引用后无法显示并报错。但组件的代码直接放到页面里是可以正常显示的。

报错信息

```javascript
vue.runtime.esm.js?c320:4560 [Vue warn]: Unknown custom element: <common-aside> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <HomePge> at views/HomePge.vue
       <HelloWorld> at src/components/HelloWorld.vue
         <App>
           <Root>

组件ComponentAside代码

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">导航一</span>
    </template>
    <el-menu-item-group>
      <span slot="title">分组一</span>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4</span>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

组件HelloWorld代码

<template>
  <div id="hello">
    <router-view>
      
    </router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>


<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面HomePage代码

<template>

<el-container >
  <el-aside with="auto">
    <common-aside></common-aside>
  </el-aside>
    <el-container>
     <el-header>Header</el-header>
     <el-main>Main</el-main>
    </el-container>
</el-container>
</template>

<script>

    import CommonAside from '../src/components/CommonAside.vue'
    export default
    {
        name:'HomePage',
        components:
        {
            CommonAside
        },
        data (){return {}}
    }

</script>
<script lang="less" scoped>
    .el-header
    {
        background-color:#333
    }
    .el-main
    {
        
    }
</script>

```

Answer 1

报错提示的很清楚:需要提供name属性
你的ComponentAside组件没有写

export default
    {
        name:'ComponentAside',
    }