用vue2做一个登陆页面

在 Vue 2 中创建一个简单的登录页面，你可以遵循以下几个步骤：

1. **设置项目结构**：
- 创建一个新的 Vue 项目，可以使用 `vue create my-login-page` 或者手动安装Vue CLI。

2. **创建组件**：
- 在 `src/components` 文件夹下创建两个文件，分别为 `Login.vue` (登录表单) 和 `Header.vue` (包含导航等公共元素)。

<!-- src/components/Login.vue -->
<template>
  <div class="login-form">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" :placeholder="placeholderUsername"/>

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

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

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      placeholderUsername: '请输入您的用户名',
      placeholderPassword: '请输入您的密码',
      errorMessage: ''
    };
  },
  methods: {
    handleLogin() {
      // 这里仅做数据校验，真实场景下应发送请求到服务器验证
      if (!this.username || !this.password) {
        this.errorMessage = '请输入完整信息';
      } else {
        this.errorMessage = '';
      }
    }
  }
};
</script>

3. **在 App 组件中使用登录组件**：
- 在 `src/App.vue` 文件中引入并渲染 Login 组件，同时可能需要 Header 组件。

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

<script>
import Login from '@/components/Login.vue';

export default {
  components: {
    Login
  }
};
</script>

4. **添加路由**：
- 使用 Vue Router 添加一个用于登录的路由，比如 `/login`，并在需要的地方跳转到这个页面。

5. **样式处理**：
- 在 CSS 或 SCSS 文件中添加一些基本样式，如按钮样式、输入框占位符颜色等。

注意，这只是一个基础示例，实际应用中可能还需要考虑更复杂的错误处理、状态管理（Vuex）、以及响应式设计等。另外，登录功能通常会涉及网络请求，这里为了简洁没有展示如何连接到后端服务。