用vue3 写出一个完整的用户登录界面

首先，安装必要的依赖包。

npm install vue@next vue-router vuex

然后，创建一个名为App.vue的根组件。

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

接下来，创建一个名为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

然后，创建一个名为store.js的Vuex存储文件。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      isLoggedIn: false,
    }
  },
  mutations: {
    login(state) {
      state.isLoggedIn = true
    },
    logout(state) {
      state.isLoggedIn = false
    },
  },
})

export default store

接下来，创建一个名为Home.vue的组件，作为登录后的主页。

<template>
  <div>
    <h1>Welcome to the Home page!</h1>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Home',
  methods: {
    ...mapMutations(['logout']),
  },
}
</script>

然后，创建一个名为Login.vue的组件，用于用户登录。

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" required>
      <input type="password" v-model="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['login']),
    login() {
      // 实际的登录逻辑，例如，发送登录请求到服务器
      // 如果登录成功，调用 `this.login()` 来更新 `isLoggedIn` 状态
      this.login()
      this.$router.push('/') // 登录成功后跳转到主页
    },
  },
}
</script>

最后，在入口文件main.js中，初始化Vue应用程序。

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')

现在，你可以运行应用程序并访问http://localhost:8080/login来查看用户登录界面。