34. vue-todo 프로젝트 | 컴포넌트 생성 및 등록

이 오류나서 npm 설치 해줬음

---

<App.vue>

<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'


export default {

  components: {
   // 컴포넌트 태그명 : 컴포넌트 내용
    'TodoHeader': TodoHeader,
    'TodoInput': TodoInput,
    'Todolist': Todolist,
    'TodoFooter': TodoFooter
  }
  

 }
</script>

<style>

</style>

---

<TodoHeader.vue>

<template>
<!-- html -->
    <div>
        header   
    </div>
</template>

<script>
// js script
export default {
    name: 'Todo-Header',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

// css

</style>

---

<TodoInput.vue>

<template>
    <div>
        input
    </div>
</template>

<script>
export default {
    name: 'Todo-Input',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>

---

<Todolist.vue>

<template>
    <div>
        list
    </div>
</template>

<script>
export default {
    name: 'Todo-list',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>

---

<TodoFooter.vue>

<template>
    <div>
        footer
    </div>
</template>

<script>
export default {
    name: 'Todo-Footer',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="scss" scoped>

</style>