一、VUE3+CSS+VITE+C(工程创建与登录，退出实现， 本地存储localStorage)

1、创建vite项目

npm create vite@latest txwd_vue --template vue

选项如下：

 2、运行测试

 

3、安装必要的依赖

 #vue路由和状态管理

npm install vue-router@4 pinia

#可选：UI组件库（如Element Plus）简化样式开发

npm install elements-plus

 

4、项目结构

plaintext

  src/

├── router/           # 路由配置
│   └── index.js
├── stores/           # 状态管理
│   └── user.js       # 用户登录状态
├── views/            # 页面组件
│   ├── LoginView.vue     # 登录页
│   └── HomeView.vue      # 首页（登录后访问）
├── App.vue           # 根组件
└── main.js           # 入口文件

5. 配置路由（src/router/index.js）

import {createRouter, createWebHistory} from 'vue-router'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'
import {useUserStore} from '../stores/user'

//路由守卫：未登录禁止访问首页
const requireAuth = (to, from, next) => {
    const userStore = useUserStore()
    if(userStore.isLogin)
    {
        next();
    }
    else
    {
        next('/login')
    }
}

const routes = [
    {
        path:'/login',
        component:LoginView
    },
    {
        path:'/',
        component:HomeView,
        beforeEnter:requireAuth
    },
    {
        //404重定向
        path:'/:pathMath(.*)',
        redirect:'/login'
    }
]

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

export default router

6. 用户状态管理（src/stores/user.js）

import {defineStore} from 'pinia'

export const useUserStore = defineStore('user', {
    state:() => ({
        isLogin:false,
        userInfo:null
    }),
    actions:{
        //模拟登录
        login(userName, password)
        {
            //实际项目中替换为接口请求
            if('admin' === userName && '123' === password)
            {   
                this.isLogin = true
                this.userInfo = {userName}
                localStorage.setItem('user', JSON.stringify(this.userInfo)) //持久化存储
                return true
            }
            return false
        },
        // 退出登录
        logout() {
            this.isLogin = false
            this.userInfo = null
            localStorage.removeItem('user')
        },
        //初始化：从本地存储恢复状态
        init(){
            const user = localStorage.getItem('user')
            if(user)
            {
                this.isLogin = true
                this.userInfo = JSON.parse(user)
            }
        }
    }
})

7. 登录页面（src/views/LoginView.vue）

<template>
    <div class="login-container">
        <h2>登录</h2>
        <form @submit.prevent="handleLogin">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" v-model="userName" required placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" v-model="password" required placeholder="请输入密码">
            </div>
            <button type="submit">登录</button>
            <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
        </form>
    </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import { useUserStore } from "../stores/user"

const userName = ref('')
const password = ref('')
const errorMsg = ref('')
const router = useRouter()
const userStore = useUserStore()

const handleLogin = () => {
    const success = userStore.login(userName.value, password.value)
    if(success)
    {
        router.push('/') //登录成功首页
    }
    else
    {
        errorMsg.value = '用户名或密码错误'
    }
}
</script>

<style scoped>
    .login-container {
        width: 300px;
        margin: 100px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 8px;
    }
    .form-group{
        margin-bottom: 15px;
    }
    input{
        width: 100%;
        padding: 8px;
        margin-top: 5px;
    }
    button{
        width: 100%;
        padding: 10px;
        background: #42b983;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .error{
        color: red;
        margin-top: 0.9em;
        font-size: 0.9em;
    }
</style>

8. 首页（src/views/HomeView.vue）

<template>
    <div class="home">
        <h2>欢迎回来，{{ useUserStore.userInfo?.userName}}</h2>
        <button @click="handleLogout">退出登录</button>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import { useUserStore } from "../stores/user"

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
    userStore.logout()
    alert("logout then login")
    router.push('/login')
}
</script>

<style scoped>
    .home{
        text-align: center;
        margin-top: 50px;
    }
    button{
        padding: 8px 16px;
        background: #ff4444;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
</style>

9. 根组件和入口文件(App.vue)

<template>
  <div>
    <!--
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    -->
    <router-view></router-view>
  </div>
</template>

<style scoped>
</style>

10. 运行项目

访问 http://localhost:5173 即可看到登录页面，使用 admin/123 登录后可进入首页。

功能说明

1. 登录验证：前端模拟用户名密码校验（实际项目需替换为接口请求）
2. 路由守卫：未登录用户无法访问首页，会被重定向到登录页
3. 状态持久化：登录状态保存在 localStorage，刷新页面不会丢失
4. 退出功能：清除登录状态并跳转回登录页