vue.js 프로젝트 소개 및 컴포넌트 설계 방법

vue.js todo app

vue 프로젝트 src 내부 안에 components 라는 폴더를 하나 만들어둔다.

• VS code 에서 Vetur 플러그인을 사용하면 편안하게 vue 코딩이 가능하다.

TodoHeader.vue 파일 생성

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

<script>
export default {
  name: "TodoHeader.vue"
//  js script
}
</script>

<style scoped>
/* css */
</style>

TodoInput.vue

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

<script>
export default {
  name: "TodoInput"
}
</script>

<style scoped>

</style>

두 개의 컴포넌트를 만들었다. 두 차이는 간단한 text 차이밖에 없고, 컴포넌트는 항상 템플릿 안에 HTML 태그는 하나만 있어야한다.

컴포넌트 등록방법은 일단 기본 프로젝트 생성이 구성된 App.vue 내부의 코드를 정리한다.

App.vue

<template>
  <div id="app">

  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">

</style>

컴포넌트 등록방법

<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'
// <script> 태그 바로 안쪽에 import 하면된다. 형식은 
    // import Component이름(컴포넌트 태그명) from '컴포넌트 경로'

    export default{


    }
</script>

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

컴포넌트 태그명은 import 하면서 지정한 이름이 컴포넌트 태그명이다.

components에서 컴포넌트 등록할 때 파스칼 기법(TodoHeader 단어의 첫 글자는 대문자)으로 권장하지만,

template태그에서 컴포넌트를 사용할 때는 케밥 기법(todo-header)으로 권장하고 있다.

하지만 개인 선호에 따라 스타일 가이드가 있어서 파스칼 기법으로 해도 문제가 발생하지 않는다.

npm run serve 또는 npm run dev 를 통해 서버를 실행한 뒤 개발자 모드로 잘 표현되는지와 컴포넌트가 잘 등록이 됐는지 확인한다.