這是一個(gè)使用vue腳手架創(chuàng)建的登錄界面，基本結(jié)構(gòu)如下：

<template>
<div>
<form>
<h2>登錄</h2>
<div>
<label for="username">用戶名:</label>
<input type="text" id="username" v-model="username">
</div>
<div>
<label for="password">密碼:</label>
<input type="password" id="password" v-model="password">
</div>
<button type="submit" @click.prevent="login">登錄</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 處理登錄邏輯
}
}
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background-color: #00bcd4;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 16px;
cursor: pointer;
transition: .3s all;
}
button:hover {
background-color: #008c9e;
}
</style>

上面的代碼中，template部分包含了一個(gè)form表單，在里面有一個(gè)標(biāo)題“登錄”和兩個(gè)文本框（用戶名和密碼）和一個(gè)提交按鈕。綁定了v-model指令實(shí)現(xiàn)輸入框和data屬性的雙向綁定，按鈕綁定了一個(gè)點(diǎn)擊事件，點(diǎn)擊后會(huì)調(diào)用login方法。script部分定義了組件的data屬性和一個(gè)方法，樣式部分使用了scoped樣式，僅對(duì)組件內(nèi)部生效。

在實(shí)際開(kāi)發(fā)中，我們還需要實(shí)現(xiàn)登錄邏輯。首先需要引入axios，并在methods中定義login方法：

<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password
})
.then(res => {
// 登錄成功，跳轉(zhuǎn)到首頁(yè)
this.$router.push({path: '/'})
})
.catch(err => {
// 登錄失敗，提示錯(cuò)誤信息
console.error(err)
})
}
}
}
</script>

使用axios.post方法發(fā)送POST請(qǐng)求，將用戶名和密碼以json格式傳給后臺(tái)，成功后使用Vue Router實(shí)現(xiàn)路由跳轉(zhuǎn)，失敗時(shí)在控制臺(tái)輸出錯(cuò)誤信息。

到這里，一個(gè)基本的登錄界面就創(chuàng)建好了，開(kāi)發(fā)者可以根據(jù)需要自行美化樣式和添加其他功能。