싱글 파일 컴포넌트 구성.

ES5

var cmp = {
  template : '<div>my component</div>'
};

new Vue({
  el:'',
  components: {
    'my-cmp':cmp
  }
});

---

ES6

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

//Vue 
export default {
  components: {
    //태그명 : 내용 ES6 에서는 값과 내용이 같을시 생략됨
    TodoHeader,
    TodoInput,
    TodoList,
    TodoFooter
  }
}
</script>

<style>

</style>