如何在vue.js中导入子组件？

Question

我创建了一个自定义的vue.js组件。

组件划痕：/scratch/index.js：

import drawArea from './drawArea.vue';
import scratchList from './scratchList.vue';

export default  {
    drawArea,
    scratchList,
}

在main.vue中

  <template>
    <drawArea></drawArea>
  </template>
  <script > 
  import {drawArea, scratchList} from '../components/Scratcher';
  export default {
    components: {
      'drawArea': drawArea, 
   },
  }
  </script>

但是我收到了一个错误：

  

未知的自定义元素： - 您是否正确注册了该组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。

如何正确注册我的组件？

谢谢。