Vue3 + TypeScript + Pinia + VueRouter + Element Plus 后台管理系统

Vue3+TypeScript+Pinia+VueRouter+ElementPlus后台管理系统一、项目结构（标准后台架构）plaintextsrc/├──api/#接口请求├──assets/#静态资源├──components/#公共组件├──layouts/#布局（侧边栏+顶部+主内容）├──router/#路由├──stores/#Pinia状态管理├──types/#TS类型定义├──utils/#工具类├──views/#页面├──App.vue└──main.ts二、package.json依赖json{"name":"vue3-admin-ts","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite","build":"vue-tsc&&vitebuild","preview":"vitepreview"},"dependencies":{"axios":"^1.6.0","element-plus":"^2.4.0","pinia":"^2.1.7","vue":"^3.3.8","vue-router":"^4.2.5"},"devDependencies":{"@vitejs/plugin-vue":"^4.4.0","typescript":"^5.2.2","vite":"^5.0.0","vue-tsc":"^1.8.22"}}三、vite.config.tstypescript运行import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':resolve(__dirname,'src')}},server:{port:3000,open:true}})四、tsconfig.json关键配置json{"compilerOptions":{"target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"],"skipLibCheck":true,"baseUrl":"./","paths":{"@/*":["src/*"]},"moduleResolution":"bundler","allowImportingTsExtensions":true,"resolveJsonModule":true,"isolatedModules":true,"noEmit":true,"jsx":"preserve","strict":true,"noUnusedLocals":true,"noUnusedParameters":true,"noFallthroughCasesInSwitch":true},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"references":[{"path":"./tsconfig.node.json"}]}五、main.ts（入口）typescript运行import{createApp}from'vue'import{createPinia}from'pinia'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importrouterfrom'./router'importAppfrom'./App.vue'import'./assets/style.css'constapp=createApp(App)app.use(createPinia())app.use(router)app.use(ElementPlus)app.mount('#app')六、路由（router/index.ts）typescript运行import{createRouter,createWebHistory}from'vue-router'importLayoutfrom'@/layouts/Layout.vue'constroutes=[{path:'/login',component:()=>import('@/views/Login.vue'),meta:{hidden:true}},{path:'/',component:Layout,redirect:'/dashboard',children:[{path:'dashboard',component:()=>import('@/views/Dashboard.vue'),meta:{title:'控制台'}},{path:'user',component:()=>import('@/views/User.vue'),meta:{title:'用户管理'}}]}]constrouter=createRouter({history:createWebHistory(),routes})//路由守卫（简单示例）router.beforeEach((to,_,next)=>{consttoken=localStorage.getItem('token')if(to.path!=='/login'&&!token)returnnext('/login')next()})exportdefaultrouter七、Pinia状态管理（stores/user.ts）typescript运行import{defineStore}from'pinia'interfaceUserState{token:string|nulluserInfo:Record<string,any>|null}exportconstuseUserStore=defineStore('user',{state:():UserState=>({token:localStorage.getItem('token'),userInfo:null}),actions:{setToken(token:string){this.token=tokenlocalStorage.setItem('token',token)},logout(){this.token=nullthis.userInfo=nulllocalStorage.removeItem('token')}}})八、布局Layout（layouts/Layout.vue）vue<template><divclass="layout"><el-containerstyle="height:100vh"><el-asidewidth="220px"class="aside"><el-menu:default-active="$route.path"routerclass="menu"><el-menu-itemindex="/dashboard">控制台</el-menu-item><el-menu-itemindex="/user">用户管理</el-menu-item></el-menu></el-aside><el-container><el-headerclass="header"><span>后台管理系统</span><el-button@click="logout"type="text">退出</el-button></el-header><el-mainclass="main"><router-view/></el-main></el-container></el-container></div></template><scriptsetuplang="ts">import{useUserStore}from'@/stores/user'import{useRouter}from'vue-router'constuserStore=useUserStore()constrouter=useRouter()constlogout=()=>{userStore.logout()router.push('/login')}</script><stylescoped>.layout{height:100vh;}.aside{background:#001529;}.header{background:#fff;border-bottom:1pxsolid#eee;display:flex;justify-content:space-between;align-items:center;}.main{background:#f5f5f5;}</style>九、登录页面（views/Login.vue）vue<template><divclass="login"><el-cardclass="box"><h2>后台登录</h2><el-formmodel="form"label-width="80px"><el-form-itemlabel="账号"><el-inputv-model="form.username"/></el-form-item><el-form-itemlabel="密码"><el-inputv-model="form.password"type="password"/></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button></el-form-item></el-form></el-card></div></template><scriptsetuplang="ts">import{ref}from'vue'import{useUserStore}from'@/stores/user'import{useRouter}from'vue-router'import{ElMessage}from'element-plus'constuserStore=useUserStore()constrouter=useRouter()constform=ref({username:'admin',password:'123456'})constlogin=()=>{if(!form.value.username||!form.value.password){returnElMessage.warning('请输入账号密码')}//模拟登录userStore.setToken('admin-token')ElMessage.success('登录成功')router.push('/')}</script><stylescoped>.login{height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f5;}.box{width:400px;padding:20px;}</style>十、控制台页面（views/Dashboard.vue）vue<template><div><el-card><h2>控制台</h2><p>欢迎使用Vue3+TypeScript+Pinia后台管理系统</p></el-card></div></template><scriptsetuplang="ts"></script>十一、用户管理页面（views/User.vue）vue<template><div><el-card><h3>用户管理</h3><el-table:data="tableData"border><el-table-columnprop="i