HBuilderX编写vue登录页面完整代码

HBuilderX是一款基于WebIDE的前端开发工具，它支持Vue.js等现代前端框架。创建一个简单的Vue登录页面通常包含HTML、CSS以及JavaScript（Vue组件）。下面是一个基础的Vue登录页面的代码示例：

<!-- login.vue -->
<template>
  <div class="login-container">
    <h2>Login</h2>
    <form @submit.prevent="handleSubmit">
      <label for="username">Username:</label>
      <input type="text" v-model="username" id="username" required>

      <label for="password">Password:</label>
      <input type="password" v-model="password" id="password" required>

      <button type="submit">Login</button>
      <span v-if="errorMessage">{{ errorMessage }}</span>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // 阻止表单默认提交
      if (this.username === '' || this.password === '') {
        this.errorMessage = 'Please fill in both fields.';
      } else {
        // 这里只是一个模拟，实际应用中你需要连接到服务器验证
        if (this.validateCredentials()) {
          this.$emit('loginSuccess', { username: this.username });
          this.resetForm();
        } else {
          this.errorMessage = 'Invalid credentials';
        }
      }
    },
    validateCredentials() {
      // 根据实际需要验证用户名和密码
      return true; // 这里假设输入总是有效的
    },
    resetForm() {
      this.username = '';
      this.password = '';
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f9fa;
}
</style>

在这个例子中，我们创建了一个名为`login.vue`的Vue组件，包含了用户名和密码输入框，登录按钮，以及错误消息显示。当用户点击登录，`handleSubmit`方法会被触发，进行简单的形式验证并处理逻辑。