写一个用vue的登陆页面
时间: 2023-02-27 10:58:53 浏览: 48
首先,您需要创建一个 Vue 项目,然后使用 Vue CLI 进行项目构建。
在项目中创建一个组件,例如命名为 Login.vue,在其中实现登录页面的布局和逻辑。
接下来是一个简单的登录页面代码示例:
```
<template>
<div>
<form>
<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 @click.prevent="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submit() {
// 这里可以实现登录的逻辑,例如通过 axios 发送请求等
console.log(this.username, this.password)
}
}
}
</script>
<style>
/* 这里可以写一些登录页面的样式 */
</style>
```
完成后,您可以在项目的路由中配置该组件,设置相应的访问路径,实现用户登录的功能。