使用vue3框架实现一个简单登录功能

在Vue3中实现一个简单的登录功能，通常会涉及以下几个步骤：

1. **组件化设计**：创建两个核心组件，`LoginForm` 和 `LoginButton`。`LoginForm` 负责处理用户输入和验证，`LoginButton` 控制登录操作。

<template>
  <div>
    <LoginForm @submit="handleSubmit" />
    <LoginButton v-if="showLoginButton" @click="handleLogin" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      showLoginButton: false,
      error: null,
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.showLoginButton = false; // 阻止默认提交行为
      if (validateInputs(this.username, this.password)) { // 校验输入
        this.handleLogin();
      } else {
        this.error = "请输入正确的用户名和密码";
      }
    },
    handleLogin() {
      // 实现发送登录请求到服务器的逻辑
      // 这里只是一个示例，实际项目中会包含异步API调用
      this.$axios.post('/login', { username: this.username, password: this.password })
        .then(() => {
          // 登录成功后重定向或显示提示信息
          this.$router.push('/dashboard');
        })
        .catch((error) => {
          this.error = error.response.data.message;
        });
    },
  },
};
</script>

2. **表单验证**：可以使用第三方库如`Vuelidate` 或内置的`v-model` 搭配自定义规则来验证输入。

3. **状态管理**：对于更复杂的应用，可以考虑引入状态管理库如Vuex，来统一管理全局状态。

4. **错误展示**：登录失败时，会在`LoginForm` 中更新`error` 属性，并通过条件渲染显示给用户。