npm install -g @vue/cli

vue create student-management-system

<template>

<div class="login">

<h1>欢迎来到学生工作管理系统</h1>

<form @submit.prevent="handleSubmit">

<input type="text" placeholder="用户名" v-model="username" />

<input type="password" placeholder="密码" v-model="password" />

<button type="submit">登录</button>

</form>

</div>

</template>

<script>

export default {

data() {

return {

username: '',

password: ''

};

},

methods: {

handleSubmit() {

alert(`欢迎，${this.username}!`);

}

}

};

</script>

<style scoped>

.login {

background-image: url('https://example.com/qingdao-stack-bridge.jpg');

background-size: cover;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

color: white;

}

input, button {

margin: 10px;

padding: 10px;

border-radius: 5px;

}

button {

background-color: #007bff;

color: white;

border: none;

}

</style>