【初心者向け】Vue3とElementPlusを使ってTodo Listを作ってみた



## はじめに
文系大学生で長期エンジニアインターン中の平原です。
Vueを１週間ほど学習した中でTodoListを作成したのでアウトプットとして記載します。

## 成果物
シンプルなTodoリストです
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685152/7f963c0e-8e65-fe62-e905-f74bd1963b90.gif)

##　環境

- Vue
- Vue CLI
- ElementPlus（Element uiのVue3版）

https://v3.vuejs.org/

https://cli.vuejs.org/

https://element-plus.org/#/jp
### Vueの環境構築
ターミナルで下記のコマンドを入力

```
$ vue create todolist-name（←ここにプロジェクトの名前）
```

続いてDefault (Vue 3)を選択
![vue-cli.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685152/f7744ac4-8064-7ba5-eab5-68de6a7fae29.png)
vueプロジェクトのあるディレクトリに移動

```
$ cd todolist-name
```

下記コマンドでサーバーが起動します

```
$ yarn serve
```
### ElementPlusのインストール

プロジェクトのあるディレクトリで下記のコマンドを入力（npm install 〜　でも可）

```
$ yarn add element-plus
```
## 全ソースコード
```vue:App.vue
<template>

<el-container>
<el-main>

<div class="todo-list">
  <h1>Vue 3 Todo App</h1>
  <el-form @submit.prevent="addNewTodo">
    <el-input v-model="newTodo" name="newTodo" placeholder="タスクを入力"></el-input>
  <el-button @click="addNewTodo">追加</el-button>
  </el-form>

  <el-button @click="removeAllTodos">全て削除</el-button>
  <el-button @click="markAllDone">全て完了</el-button>

  <ul>
    <li v-for="(todo, index) in todos" :key="todo.id" class="todo">
      <h3 :class="{ done: todo.done }" @click="toggleDone(todo)">{{todo.content}}</h3>
      <div>
         <el-button @click="removeTodo(index)">削除</el-button>
         <el-button @click="toggleDone(todo)">完了</el-button>
      </div>
    </li>
  </ul>

</div>

</el-main>
</el-container>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    // newTodoをセット
    const newTodo = ref('');
    // todosをセット
    const todos = ref([]);
    // todoを作成
    const addNewTodo = () => {
      todos.value.push({
        id: Date.now(),
        done: false,
        content: newTodo.value,
      });
      // newTodoの値を空にする
      newTodo.value = '';
    }
    // todoのdoneのTrueとFalseを入れ替えることで、:classを動的に変化させる
    const toggleDone = (todo) => {
      todo.done = !todo.done;
    }
    // 削除
    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    }
    // 全てTrue
    const markAllDone = () => {
      todos.value.forEach((todo) => todo.done = true);
    }
    // 全て削除
    const removeAllTodos = () => {
      todos.value = [];
    }

    return {
      todos,
      newTodo,
      addNewTodo,
      toggleDone,
      removeTodo,
      markAllDone,
      removeAllTodos,
    };
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input {
  width: 30vw !important;
}
h3 {
  margin-right: 20px;
}
li {
  width: 30vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.todo {
  cursor: pointer;
}
.done {
  text-decoration: line-through;
}
</style>
```

```js:main.js
import { createApp } from 'vue'

// ElementPlusのインポート
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

import App from './App.vue'

const app = createApp(App)
  app.use(ElementPlus)
  app.mount('#app')

```

## まとめ
Vueは初めてでしたが、ElementUIのCSSフレームワークも活用することでスピーディーに作成できました。

次は、Typescript、Vue-routerやVuexも導入したいと思います。