用vue写一个登录页面

好的，下面是用 Vue.js 实现一个登录页面的指导：

1. 安装 Vue CLI：

npm install -g @vue/cli

2. 创建一个 Vue 项目：

vue create my-project

3. 进入项目目录并运行项目：

cd my-project
npm run serve

4. 在项目中创建一个名为 `Login.vue` 的组件：

<template>
  <div>
    <form>
      <input type="text" placeholder="用户名" v-model="username"/>
      <input type="password" placeholder="密码" v-model="password"/>
      <button @click="handleLogin">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      console.log(`用户名：${this.username}，密码：${this.password}`)
    }
  }
}
</script>

5. 在项目的 `main.js` 文件中引入组件：

import Vue from 'vue'
import Login from './Login.vue'

new Vue({
  render: h => h(Login)
}).$mount('#app')

6. 在项目的 `index.html` 文件中添加一个名为 `app` 的容器元素：

<div id="app"></div>

7. 运行项目，查看登录页面效果：

npm run serve

这是一个简单的登录页面的实现示例，您可以根据自己的需求进行扩展。