【초보자용】Vue3와 ElementPlus를 사용해Todo List를 만들어 보았다

소개

문계대학생으로 장기엔지니어 인턴중의 평원입니다.
Vue를 1주일 정도 학습한 가운데 TodoList를 작성했으므로 아웃풋으로서 기재합니다.

아티팩트

간단한 Tot 목록입니다.

환경

Vue

Vue CLI

ElementPlus (Element ui의 Vue3 버전)

Vue 환경 구축

터미널에서 다음 명령 입력

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

그런 다음 Default (Vue 3) 선택

vue 프로젝트가 있는 디렉토리로 이동

$ cd todolist-name

아래 명령으로 서버가 시작됩니다.

$ yarn serve

ElementPlus 설치

프로젝트가 있는 디렉토리에 아래와 같은 명령을 입력(npm install ~도 가능)

$ yarn add element-plus

모든 소스 코드

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>

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도 도입하고 싶습니다.