vue3实现登录页面完整代码

这里是一个完整的 Vue3 实现登录页面的代码示例，包含了表单验证和登录功能：

<template>
  <div class="login">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <label>
        用户名:
        <input type="text" v-model.trim="username" required>
      </label>
      <label>
        密码:
        <input type="password" v-model.trim="password" required>
      </label>
      <button type="submit" :disabled="isLoggingIn">{{ isLoggingIn ? '登录中...' : '登录' }}</button>
    </form>
    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  name: 'Login',
  setup() {
    const state = reactive({
      username: '',
      password: '',
      errorMessage: '',
      isLoggingIn: false,
    });

    function login() {
      state.isLoggingIn = true;

      // TODO: 发送登录请求，验证用户名和密码

      // 模拟登录请求
      setTimeout(() => {
        // 如果验证通过，可以跳转到其他页面
        // 如果验证不通过，显示错误信息
        if (state.username === 'admin' && state.password === '123456') {
          // TODO: 登录成功后的操作，比如跳转到首页
        } else {
          state.errorMessage = '用户名或密码错误';
          state.isLoggingIn = false;
        }
      }, 2000);
    }

    return {
      ...state,
      login,
    };
  },
};
</script>

<style scoped>
/* 样式 */
</style>

这里使用了 reactive 函数来定义响应式数据，使用 setup 函数来定义 login 方法和返回数据。在模板中，使用 v-model 来双向绑定表单数据，并在表单提交时调用 login 方法。在 login 方法中，使用 setTimeout 模拟登录请求的异步操作，如果验证不通过，会在页面上显示错误信息。在登录过程中，登录按钮会被禁用，并显示登录中的提示信息。