Vue3 - 2 登陆页面

App.vue(去除vue vit的显示)

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

main.ts(修改入口)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App)
    .use(router)
    .mount('#app')

LoginPage.vue(豆包写的)

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

<script setup>
import { ref } from 'vue'

// 定义响应式数据
const username = ref('')
const password = ref('')
const errorMessage = ref('')

// 登录处理函数
const handleLogin = async () => {
    try {
        ......
</script>

<style scoped>
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.......
</style>

index.ts(路由文件)

import { createRouter, createWebHistory } from 'vue-router'
const routes = createRouter({
    history: createWebHistory(),
    routes: [
        {
            name: 'login', // 登录
            path: '/login',
            component: () => import('../views/index/LoginPage.vue')
        },
        {
            name: 'home', // 首页
            path: '/home',
            component: () => import('../views/index/Desktop.vue')
        },
        {
            name: 'person', // 个人中心
            path: '/person',
            component: () => import('../views/index/PersonPage.vue')
        },
        {
            name: 'notFound', // 404
            path: '/:path(.*)*',
            component: () => import('../views/index/NotFound.vue')
        },
        {
            name: "user", // 用户管理
            path: "/user",
            component: () => import("../views/admin/user/user.vue")
        },
        {
            name: "menu", // 菜单管理
            path: "/menu",
            component: () => import("../views/admin/menu/menu.vue")
        },
        {
            name: "role", // 角色管理
            path: "/role",
            component: () => import("../views/admin/role/role.vue")
        },
    ]
})
export default routes

　　

 访问 http://localhost:5002/login

 

-

-