繼上次說明完如何建立一個 Vue3 專案後，此篇會繼續實作 todo list 專案，原先我們參考網路上的設計，本篇我們先利用現有的 CSS framework 來進行，之後的案例會說明如何利用 CSS(Cascading Style Sheets) 來撰寫想要的設計。

主流的 CSS framework 有許多，諸如 Bootstrap、Semantic UI; 此次我們選擇了基於 Vue3 開發的組建庫 Element plus，直接提供大部分基礎的元件可以使用。

實作

準備

改動原始專案內容

利用 vue-cli 建立的基礎專案會包含 template 的元件內容，我們首先把它清掉以便建立自己的元件

原始的專案包含 HelloWorld, Home, About 等元件

將其改成如下結構

安裝必要套件

{
  "dependencies": {
    "@element-plus/icons": "^0.0.11",
    "element-plus": "^1.2.0-beta.4",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
}

實作 AddingTask

此元件是顯示每個任務的輸入欄位

<template>
  <div class="home">
    <el-form>
      <AddingTask v-for="i in taskNumber" :key="`task${i}`" />
      <el-button type="success" @click="addingNewTask"> Adding new task </el-button>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
import AddingTask from '@/components/AddingTask';

export default {
  name: 'Home',
  components: {
    AddingTask,
  },
  data() {
    return {
      taskNumber: 0,
    };
  },
  methods: {
    addingNewTask() {
      this.taskNumber += 1;
    },
  },
};
</script>

改寫 Home

增加一個按鈕並且新增一個事件，此事件執行新增任務元件的行為

<template>
  <div class="home">
    <el-form>
      <AddingTask v-for="i in taskNumber" :key="`task${i}`" />
      <el-button type="success" @click="addingNewTask"> Adding new task </el-button>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
import AddingTask from '@/components/AddingTask';

export default {
  name: 'Home',
  components: {
    AddingTask,
  },
  data() {
    return {
      taskNumber: 0,
    };
  },
  methods: {
    addingNewTask() {
      this.taskNumber += 1;
    },
  },
};
</script>

結果

按下按鈕後可以新增任務輸入，如此前端頁面就算初步完成了，可以學習到元件使用以及增加事件的流程，前端補充先到這邊，再來將會學習後端的使用