vue实现登录页面
创建登录页面结构
使用 Vue 单文件组件（.vue）构建登录页面的基础结构，包含表单、输入框和按钮：
<template>
<div class="login-container">
<h1>用户登录</h1>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
v-model="form.username"
placeholder="请输入用户名"
/>
</div>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="form.password"
placeholder="请输入密码"
/>
</div>
<button type="submit">登录</button>
</form>
</div>
</template>定义数据与事件处理
在 <script> 部分初始化表单数据并实现提交逻辑：
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
handleSubmit() {
// 验证输入
if (!this.form.username || !this.form.password) {
alert('请输入用户名和密码');
return;
}
// 模拟登录请求
console.log('提交数据:', this.form);
// 实际项目中替换为 axios 请求
// this.$http.post('/api/login', this.form).then(...)
}
}
}
</script>添加基础样式
在 <style> 中定义页面样式（支持 SCSS 或 CSS）：
<style scoped>
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>集成路由跳转
若项目使用 Vue Router，登录成功后跳转到主页：
methods: {
handleSubmit() {
// 模拟登录成功
this.$router.push('/dashboard');
}
}表单验证增强
使用 VeeValidate 或 Element UI 等库实现高级验证：
<template>
<input
v-model="form.username"
v-validate="'required|min:3'"
name="username"
/>
<span v-if="errors.has('username')">{{ errors.first('username') }}</span>
</template>
<script>
import { Validator } from 'vee-validate';
export default {
// 注册验证规则
created() {
Validator.extend('username', {
validate: value => /^[a-zA-Z0-9_]+$/.test(value),
message: '用户名只能包含字母、数字和下划线'
});
}
}
</script>响应式布局优化
通过媒体查询适配移动端：
@media (max-width: 600px) {
.login-container {
width: 90%;
margin-top: 20px;
}
}
