TODO 예제 – 1. 컴포넌트 생성 및 등록

#vue프로젝트

이제는 VUE CLI를 활용하여 TODO 프로젝트를 만들어 보겠습니다.
이전 포스트 끝부분에서 작업했던 CLI설치부터 시작합니다.
우선은 TODO 폴더를 생성합니다.

1.뷰 프로젝트 생성

vue init webpack-simple

새로운 뷰 프로젝트를 생성합니다.

2.관련 라이브러리 다운

npm install

관련 NPM 라이브러리를 다운로드 합니다.

3.실행

npm run dev

vue 프로젝트의 기본화면이 표시됩니다.

4.초기 설정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>todo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Vue.js ToDo</title>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

타이틀과 뷰포트, 기타 사용할 라이브러리 index.html에 넣어줍니다.
app 요소에 컨텐츠가 들어가고, build.js 파일은 빌드 후에 생성되며 관련설정은 webpack 설정 파일에서 확인이 가능합니다.

5.컴포넌트 생성

<template>
    <div>HEADER</div>
</template>

<script>
    export default {

    }
</script>


<style></style>

header,input,list,footer 컴포넌트에 내용을 넣어줍니다.
아직은 영역확인을 위해 텍스트 정도만 삽입합니다.

6.컴포넌트 등록

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

<script>
import TodoHeader from "./components/TodoHeader";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";

export default {
    components : {
        'TodoHeader' : TodoHeader,
        'TodoInput' : TodoInput,
        'TodoList' : TodoList,
        'TodoFooter' : TodoFooter,
    }
}
</script>

<style>
</style>

app 파일은 크게 3부분으로 나뉩니다.
컴포넌트를 호출하는 부분.
컴포넌트를 등록하는 스크립트 부분.
스타일 부분.

여기까지가 TODO 프로젝트를 위한 기본 준비입니다.
이제부터는 각 컴포넌트별로 작업을 진행 합니다.