请你用vue3给我写一个具有登陆功能的登陆页

好的，以下是一个简单的登陆页，使用了Vue3和Vue Router实现路由跳转和页面渲染，使用了Vuex进行状态管理，使用了axios进行数据请求。

首先，我们需要安装必要的依赖：

npm install vue@next vue-router@4 vuex@4 axios

接着，在src目录下新建一个components文件夹，用于存放组件。

在components文件夹下新建一个Login.vue组件，代码如下：

<template>
  <div class="login-container">
    <form class="login-form" @submit.prevent="login">
      <h2>Login</h2>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Login</button>
      <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    ...mapActions(['loginUser']),
    async login() {
      try {
        await this.loginUser({ username: this.username, password: this.password })
        this.$router.push('/')
      } catch (error) {
        this.errorMessage = error.response.data.message
      }
    }
  }
}
</script>

<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

label {
  margin-bottom: 5px;
}

input {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 5px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>

这个组件包含一个表单，用户可以输入用户名和密码进行登陆。如果登陆成功，跳转到首页；如果登陆失败，显示错误信息。

接着，在src目录下新建一个store文件夹，用于存放Vuex相关的代码。

在store文件夹下新建一个index.js文件，代码如下：

import { createStore } from 'vuex'
import axios from 'axios'

const store = createStore({
  state: {
    user: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    }
  },
  actions: {
    async loginUser({ commit }, { username, password }) {
      const response = await axios.post('/api/login', { username, password })
      const user = response.data
      commit('SET_USER', user)
    }
  }
})

export default store

这个Vuex store包含一个user状态，用于存放当前用户信息。同时定义了一个loginUser action，用于进行登陆操作。

接着，在src目录下新建一个router.js文件，代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import Login from './components/Login.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这个路由配置包含两个路由：首页和登陆页。

接着，在src目录下新建一个main.js文件，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

这个文件创建了一个Vue应用，并将路由和Vuex store挂载到应用中。

最后，在根目录下新建一个server.js文件，用于模拟后端API请求，代码如下：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.json())

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === 'password') {
    res.json({ id: 1, username: 'admin' })
  } else {
    res.status(401).json({ message: 'Invalid username or password' })
  }
})

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})

这个文件使用Express框架创建了一个简单的API，用于处理登陆请求。如果用户名和密码正确，返回用户信息；否则返回401错误。

现在，我们可以在命令行中运行以下命令启动应用：

node server.js

然后，在浏览器中打开http://localhost:3000，即可看到登陆页。

输入正确的用户名和密码(admin/password)，即可登陆成功，跳转到首页。

这就是一个简单的具有登陆功能的登陆页，希望对你有所帮助！