用vue写一套登录页面
时间: 2024-09-10 12:25:30 浏览: 26
在Vue.js中创建一个简单的登录页面,可以分为以下几个步骤:
1. 首先,确保已经安装了Vue CLI,然后初始化一个新的Vue项目:
```bash
vue create login-app
cd login-app
```
2. 安装Vuex用于状态管理:
```bash
npm install vuex --save
```
3. 在`src/components/Login.vue`文件中创建登录组件:
```html
<template>
<div>
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" required>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">登录</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
login() {
this.$store.dispatch('login', { username: this.username, password: this.password });
}
}
};
</script>
```
4. 在`src/store/index.js`中设置Vuex的状态和actions:
```js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLoggedIn: false,
errorMessage: ''
},
mutations: {
login(state, payload) {
// 这里只是一个示例,实际应该发送到后端验证
if (payload.username === 'admin' && payload.password === 'password') {
state.isLoggedIn = true;
state.errorMessage = '';
} else {
state.errorMessage = '用户名或密码错误';
}
},
logout(state) {
state.isLoggedIn = false;
state.errorMessage = '';
}
},
actions: {
async login({ commit }, credentials) {
try {
await someBackendLoginFunction(credentials);
commit('login', credentials);
} catch (error) {
commit('login', { ...credentials, errorMessage: error.message });
}
}
}
});
```
5. 更新App组件,显示登录结果:
```html
<!-- src/App.vue -->
<template>
<div id="app">
<router-view />
<Login v-if={!this.isLoggedIn} :error="errorMessage" />
</div>
</template>
<script>
import Login from './components/Login.vue';
export default {
components: {
Login
},
computed: {
isLoggedIn() {
return this.$store.state.isLoggedIn;
}
}
};
</script>
```
6. 运行应用:
```bash
npm run serve
```
以上就是一个基本的Vue登录页面结构,实际开发中还需考虑路由跳转、表单验证以及后端接口对接等问题。