Vue.js를 사용하여 Todo 응용 프로그램 만들기

※Vue.js가 설치된 상태를 전제로 합니다.

Vue CLI 가져오기

FumioNonaka.com( http://fumiononaka.com/Business/html5/FN1807001.html )
Vue CLI란 Vue를 의미합니다.이것은 js에서 프로그램을 만드는 명령행 인터페이스를 기반으로 한 개발 도구입니다.
즉, Vue.js의 개발을 가볍게 하는 도구입니다.
Vue CLI 추가 - g(옵션) 설치
또한 전 세계에 설치를 통해 vue 명령을 수시로 실행할 수 있습니다.

>npm install -g @vue/cli

프로젝트 작성

'vue create 프로젝트 이름' 으로 프로젝트를 만들 수 있습니다.

>vue create todoapp

모드 선택.

모드를 선택합니다(기본 모두 설정).
・십자키로 이동, 스페이스 바로 선택

Vuetify 가져오기

Vuetify란 Vue를 가리킨다.js에서 사용할 수 있는 소재 디자인 프레임워크입니다.
작성된 프로젝트로 이동하고 다음을 클릭합니다.

>vue add vuetify

실행하고 설치합니다.

프로젝트 폴더 구성

프로젝트 폴더의 파일은 다음과 같습니다.

부호화

・components 폴더(todoapp\src\components)에'TodoForm.vue'와'TodoList.vue'를 추가합니다.
TodoForm.vue

<template>
    <div>
        <v-toolbar dark color="indigo">
            <router-link to="/">
                <v-icon>arrow_back</v-icon>
            </router-link>
            <v-toolbar-title class="while--text">My Todo</v-toolbar-title>
        </v-toolbar>
        <v-text-field v-model="newTodo" placeholder="Input Here...">
        </v-text-field>
        <v-btn dark color="indigo"
        v-on:click="addTodo()" class="while--text">
        ADD
        </v-btn>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                newTodo:''
            }
        },
        methods:{
            addTodo(){
                if(this.newTodo === '')return;
                const todos = JSON.parse(localStorage.getItem('todos')) || [];
                    todos.push(this.newTodo);
                        localStorage.setItem('todos',JSON.stringify(todos));
                            this.newTodo = '';
                            this.$router.push('/');
            }
        }
    }
</script>

<style scoped>
    a{
    text-decoration:none;
    }
</style>

TodoList.vue

<template>
    <div>
        <v-toolbar dark color="indigo">
            <v-toolbar-title class="while--text">
                My Todo
            </v-toolbar-title>
        </v-toolbar>
        <v-list>
            <template v-for="(todo,i) in todos">
                <v-list-tile
                v-bind:key="i">
                <v-list-tile-content>
                {{ todo }}
                </v-list-tile-content>
                <v-list-tile-action>
                    <v-btn flat icon
                    v-on:click="deleteTodo(i)">
                        <v-icon>delete</v-icon>
                    </v-btn>
                </v-list-tile-action>
                </v-list-tile>
                <v-divider v-bind:key="i">
                </v-divider>
            </template>
        </v-list>
        <div class="bottom-right">
            <v-btn fab color="indigo"
            v-on:click="addTodo">
            <v-icon color="while">add</v-icon>
            </v-btn>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                todos:[]
            }
        },
        created(){
            this.todos = JSON.parse(localStorage.getItem('todos')) || [];
        },
        methods:{
            deleteTodo(i){
                this.todos.splice(i,1);
                    localStorage.setItem('todos',JSON.stringgify(this.todos));
            },
            addTodo(){
                this.$router.push('/todos/add');
            }
        }
    }
</script>

<style scoped>
    .bottom-right{
        position:fixed;
        bottom:0px;
        right:0px;
    }
</style>

·다음으로 src 폴더(todoapp\src) 내의 "App.vue"를 다음과 같이 변경합니다.
App.vue

<template>
    <router-view></router-view>
</template>

・ 다음에 이 폴더 내의 "router.js"를 다음과 같이 변경합니다.
router.js

import Vue from 'vue'
import Router from 'vue-router'
import TodoList from './components/TodoList'
import TodoForm from './components/TodoForm'

Vue.use(Router)

export default new Router({
    mode:'history',
    base:process.env.BASE_URL,
    routes:[
    {
    path:'/',
    component:TodoList
    },
    {
    path:'/todos/add',
    component:TodoForm
    }
    ]
})

서버 시작

프로젝트로 이동한 다음

>npm run serve

집행하다.
※ 서버 정지는 "Ctr+C"
・“http://localhost:8080/액세스"
• 실행화면 1

• 실행화면 2

• 실행화면 3