(1)新增會員頁面檔案
路徑 src / views 底下新增 front 資料夾，並於此增加 LoginView.vue 檔案。html 架構同註冊頁面（表單驗證規則亦是），僅兩個部分不同：

• 移除會員名稱 <v-field></v-field> 相關語法。會員頁面只需電子郵件與密碼。
• 改變表單按鈕顏色與文字。
• <v-form></v-form> 後面增加 <RouterLink></RouterLink> 標籤用以連結回註冊頁面。適用於當用戶非會員時可藉此連結回註冊頁面。

<template>
...
  <v-form id="form" ref="form" v-slot="{ errors }" @submit="submitOrder">
  <h1 class="mb-4 text-center">華特義式餐廳</h1>
  <p class="mb-4 fs-4 text-center">歡迎華特會員</p>
  ...
   <button class="btn btn-lg btn-info w-100 mb-4" type="submit">
     登入
   </button>
  ...
  </v-form>
  <div class="text-end login-buttom">
    <RouterLink to="/">返回註冊會員</RouterLink>
  </div>
  ...
</template>

<script></script> 部分也是同註冊頁面。僅表單送出按鈕時，是用 POST 的網路請求來確認該筆資料是否為會員，若否則跳出"您尚未成為會員，請先註冊"訊息提醒。

<script>
import axios from "axios";

export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    ...
    // 表單送出按鈕
    submitOrder() {
      // 使用 Vee Validate 的 validate 函式來驗證表單
      this.$refs.form.validate().then((valid) => {
        if (valid) {
          // 驗證通過，可以提交表單
          axios
            .get(`http://localhost:3000/user?email=${this.email}&password=${this.password}`)
            .then((res) => {
              console.log(res);
              alert("登入成功");
              // 網路請求成功後清空表單欄位(初始化)
              this.$refs.form.resetForm();
            })
            .catch((error) => {
              console.log(error);
              alert("您尚未成為會員，請先註冊");
            });
        } else {
          // 驗證不通過不予提交並顯示錯誤訊息
          alert("請再次確認會員資料後提交");
        }
      });
    },
  },
};
</script>

(2)新增路由
路徑 src / router / index.js 寫入以下語法。將登入頁面建為新路由。

const router = createRouter({
  ...
  routes: [
  ...
      {
        path: '/login',
        component: () => import('../views/front/LoginView.vue')
      },
  ]
})

(3)註冊頁面增加會員頁面連結
html 架構裡增加 <RouterLink></RouterLink> 用以連結到會員頁面。

<template>
  ...
  <div class="text-end login-buttom">
    <RouterLink to="/login">已是會員，請按此登入</RouterLink>
  </div>
  ...
</template>

首頁畫面結果。
(1)註冊頁面

(2)會員頁面

補充：會員登入頁面可以更改左側圖片來區別註冊頁面