使用vue生成登陆页面

使用Vue.js创建登录页面的基本步骤如下：

1. **安装Vue**：首先确保已经全局安装了Vue CLI，如果没有，可以运行`npm install -g @vue/cli`。

2. **初始化项目**：创建一个新的Vue项目，例如：`vue create my-login-page`，选择默认选项即可。

3. **导航到项目目录**：进入项目文件夹`cd my-login-page`。

4. **选择组件架构**：Vue CLI会自动生成一个基本结构，如果想创建单文件组件(SFC)，可以选择骨架组件(`vue-router`, `vue-template-compiler`)而不是脚手架。

5. **创建登录组件**：在`src/components`文件夹下创建一个新的文件，如`Login.vue`，添加以下代码：

<template>
  <div class="login-form">
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <input type="text" v-model="username" placeholder="Username" required/>
      <input type="password" v-model="password" placeholder="Password" required/>
      <button type="submit">Login</button>
    </form>
    <p v-if="error" class="error-message">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    };
  },
  methods: {
    handleLogin() {
      // 这里只是一个简单的示例，实际应用中应发送请求并处理响应
      if (this.username === 'admin' && this.password === 'password') {
        this.error = '';
      } else {
        this.error = 'Invalid credentials';
      }
    }
  }
};
</script>

<style scoped>
.login-form {
  /* 样式可以根据需要定制 */
}
.error-message {
  color: red;
}
</style>

6. **引入组件**：在App.vue或者其他合适的组件中导入并使用`Login`组件。

7. **路由配置**（如果有用的话）：如果想要在单独的路由中显示登录页，可以在`router/index.js`中配置路由。

完成以上步骤后，你应该就有了一个基础的登录页面。你可以根据实际需求添加验证、错误提示、记住密码等功能，并确保安全性。