js,html,vue生成一个登陆界面

以下是一个简单的登陆界面的代码示例，包括 HTML，CSS 和 JavaScript，使用了 Vue.js 框架。

HTML：

<div id="app">
  <form class="login-form" @submit.prevent="login">
    <h2>Login</h2>
    <label for="username">Username:</label>
    <input type="text" id="username" v-model="username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="password" required>
    <button type="submit">Login</button>
  </form>
</div>

CSS：

.login-form {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 10px;
}

input {
  padding: 5px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

button:hover {
  background-color: #3e8e41;
}

JavaScript：

new Vue({
  el: '#app',
  data: {
    username: '',
    password: ''
  },
  methods: {
    login() {
      // 处理登录逻辑
      console.log('Login clicked');
      console.log('Username:', this.username);
      console.log('Password:', this.password);
    }
  }
});

该示例使用 Vue.js 框架来处理表单数据和登录逻辑。在 HTML 中，我们绑定了表单的 submit 事件到 `login` 方法上。在 `login` 方法中，我们可以处理表单数据，比如发送一个 AJAX 请求到服务器来验证用户名和密码。