Vue.js에서 Todo 앱을 만들려고했기 때문에
각서도 겸하고 정리해 둡니다.

완성도

환경설정

① npde.js 최신 버전 설치 : htps : // 그래서 js. 오 rg / 그럼
※여기에서는 v11.14.0

②Vue CLI를 글로벌 설치$ npm install -g @vue/cli※여기에서는 v3.6.3

프로젝트 신규 추가

①Vue CLI 프로젝트 작성$ vue create <プロジェクト名>둘 중 하나를 선택
1. default (라우팅 없음)
2. Manually select features (라우팅 있음)

②Vue CLI 프로젝트 실행$ npm run serve

여기에서 Todo 앱 만들기

이번에는 Vuetify라는 플러그인을 이용하는 방법을 소개합니다.
① 문서 루트 내에 프로젝트 신규 작성
프로젝트 이름은 임시로 "todoapp"$ vue create todoapp
② 라우팅이 필요하기 때문에Manually select features 선택rooter 선택
※다른 질문은 디폴트로 OK

③Vuetify 플러그인 추가$ cd todoapp$ vue add vuetify※질문은 모두 디폴트로 OK

각 파일 추가/편집

①TodoForm 컴포넌트 작성

src/components/TodoForm.vue

<template>
    <div>
        <v-toolbar dark color="indigo">
            <router-link to="/">
                <v-icon>arrow_back</v-icon>
            </router-link>
            <v-toolbar-title class="white--text">
                My Todo
            </v-toolbar-title>
        </v-toolbar>
        <v-text-field v-model="newTodo" placehlder="Input here..."></v-text-field>
        <v-btn dark color="indigo" v-on:click="addTodo()" class="white--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 컴포넌트 작성

src/components/TodoList.vue

<template>
    <div>
        <v-toolbar dark color="indigo">
            <v-toolbar-title class="white--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="bittom-right">
            <v-btn fab color="indigo" v-on:click="addTodo">
                <v-icon color="white">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.stringify(this.todos));
            },
            addTodo() {
                this.$router.push('/todos/add');
            }
        }
    }
</script>

<style scoped>

.bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
}

</style>

③부모 컴포넌트 수정

src/App.vue

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

④ 라우팅 설정

src/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
    }
  ]
})

Material Icons 오프라인 지원

모바일 기기에서 앱을 실행하면 네트워크에 연결할 수 없는 상황이 발생합니다. 따라서 Material Icons를 오프라인으로 설정해야 합니다.

①Material Icons 설치$ npm install material-icons
②main.js내 1행 추가

src/main.js

import Vue from 'vue'
import './plugins/vuetify'
import 'material-icons/iconfont/material-icons.css' // 追加
import App from './App.vue'
import router from './router'

②index.html2행분 삭제

public/index.html

<!-- 削除 / コメントアウト -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> -->