vue弄一个登录页面

在Vue中创建一个登录页面通常会涉及以下几个步骤：

1. **组件结构**：
创建一个新的Vue组件，比如`Login.vue`，它将包含两个主要部分：输入字段（用户名和密码）以及登录按钮。

<template>
  <div class="login-form">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">
      <label for="username">用户名:</label>
      <input type="text" v-model="username" id="username" required>

      <label for="password">密码:</label>
      <input type="password" v-model="password" id="password" required>

      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      if (this.validateForm()) {
        this.login(); // 如果验证通过，调用登录函数
      } else {
        this.errorMessage = '请输入正确的用户名和密码';
      }
    },
    validateForm() { // 自定义的验证逻辑
      return !!(this.username && this.password);
    },
    login() { // 这里需要连接到实际的API服务或模拟数据
      // 实际操作，这里仅作示例
      // axios.post('/api/login', { username: this.username, password: this.password });
    }
  }
};
</script>

2. **样式**：
添加一些CSS样式，例如字体、布局和错误提示的颜色等。

3. **路由配置**：
登录页面通常是在应用的入口处显示，你可以将其添加到你的路由配置文件（如`router.js`）中，设置为初始加载页面或特定路径访问。

import Vue from 'vue';
import App from './App.vue';
import Login from '@/components/Login.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
    },
    // 其他路由...
  ]
});

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