vue3实现登录页面

下面是一个简单的 Vue3 登录页面的实现：

1. 创建一个 Login.vue 组件，包括用户名、密码输入框和登录按钮：

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

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      username: '',
      password: '',
    });

    const login = () => {
      // 处理登录逻辑
    };

    return {
      ...state,
      login,
    };
  },
};
</script>

2. 在 App.vue 中引入 Login 组件，并设置路由：

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

<script>
import { createRouter, createWebHashHistory } from 'vue-router';
import Login from './components/Login.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
    },
  ],
});

export default {
  router,
};
</script>

3. 在 main.js 中挂载 App 组件：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

现在访问网站根路径应该可以看到登录页面了。你需要在 login 函数中实现真正的登录逻辑，这里只是一个简单的示例。