帮我用vue2写一个登录页面

以下是一个简单的登录页面示例：

1. 创建一个Vue实例并引入Vue和Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: []
})

new Vue({
  router
}).$mount('#app')

2. 在HTML中添加登录表单：

<template>
  <div class="login">
    <h2>登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="email">邮箱</label>
        <input type="email" v-model="email" required>
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

3. 在Vue实例中添加登录方法：

export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 发送登录请求
      axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      .then(response => {
        // 登录成功，跳转到首页
        this.$router.push('/')
      })
      .catch(error => {
        // 登录失败，提示错误信息
        alert(error.response.data.message)
      })
    }
  }
}

4. 在路由中添加登录页面：

const routes = [
  {
    path: '/login',
    component: Login
  },
  // 其他路由...
]

const router = new VueRouter({
  mode: 'history',
  routes
})

5. 最后，在HTML中添加路由出口：

<div id="app">
  <router-view></router-view>
</div>