vue实现前端登录页面

要实现前端登录页面，可以使用Vue框架和相关插件，以下是一个简单的实现步骤：

1. 创建一个Vue项目，可以使用Vue-cli等工具。
2. 在src目录下创建一个views文件夹，用于存放页面组件。
3. 在views文件夹下创建一个Login.vue文件，用于编写登录页面的代码。
4. 在Login.vue中添加表单元素，包括用户名和密码输入框、登录按钮等。
5. 使用Vue-router插件配置路由，将Login.vue组件与路由对应。
6. 在Login.vue中编写登录逻辑，当用户点击登录按钮时，向后端发送登录请求。可以使用axios等插件发送请求。
7. 根据后端返回的结果，判断登录是否成功，如果成功则跳转到其他页面，否则显示错误信息。

下面是一个简单的示例代码：

<template>
  <div>
    <h1>登录</h1>
    <form>
      <input type="text" v-model="username" placeholder="用户名" />
      <input type="password" v-model="password" placeholder="密码" />
      <button type="button" @click="login">登录</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        // 登录成功，跳转到其他页面
        this.$router.push('/home')
      } catch (error) {
        // 登录失败，显示错误信息
        this.error = '用户名或密码错误'
      }
    }
  }
}
</script>

在上面的代码中，使用了axios插件发送登录请求，并根据后端返回的结果判断登录是否成功。如果成功，则通过`this.$router.push('/home')`跳转到其他页面。如果失败，则在页面上显示错误信息。

需要注意的是，上面的代码中的`/api/login`是后端提供的登录接口地址，需要根据实际情况进行修改。