Vue.jsを用いたTodoアプリ

#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
```
↳"Manually select features"を選択。
![スクリーンショット (209).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/c6cc552b-7925-5a25-e794-07621441c2fc.png)
↳"Router"を選択(設定は全てデフォルト)。
・十字キーで移動、Spaceキーで選択
![スクリーンショット (210).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/00e77ccf-af16-569f-2a4a-3b37ee2d2b48.png)
####Vuetifyの導入
VuetifyとはVue.jsで使える**マテリアルデザインフレームワーク**です。

作成したプロジェクトに移動し、

```
>vue add vuetify
```
を実行しインストールします。

####プロジェクトフォルダ構成
プロジェクトフォルダ内のファイル構成は以下のようになっています。
![スクリーンショット (211).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/0f506b33-a70a-ba3c-eb67-e6a0827500a0.png)
####コーディング
・componentsフォルダ(todoapp\src\components)に"TodoForm.vue"と"TodoList.vue"を作成追加していきます。

```vuejs: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>
```
```vuejs: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"を以下に変更します。

```vuejs:App.vue
<template>
	<router-view></router-view>
</template>
```
・続いて、同フォルダ内の"router.js"を以下に変更します。

```javascript: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

![スクリーンショット (216).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/0b9e097c-6daa-8886-db8e-35a7d6902028.png)
・実行画面 2
![スクリーンショット (217).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/8338a98e-896b-5a42-c7c3-cf266c46c578.png)
・実行画面 3
![スクリーンショット (218).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317384/7f19e5b1-9bed-dd66-eee5-a32c8abd2e59.png)