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

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

报错信息

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

found in

--->  at views/HomePge.vue
        at src/components/HelloWorld.vue
         
           

组件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">选项1el-menu-item>
      <el-menu-item index="1-2">选项2el-menu-item>
    el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3el-menu-item>
    el-menu-item-group>
    <el-submenu index="1-4">
      <span slot="title">选项4span>
      <el-menu-item index="1-4-1">选项1el-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>Headerel-header>
     <el-main>Mainel-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>

```

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

export default
    {
        name:'ComponentAside',
    }