1.新建layout文件夹 新建index.vue 添加router

const routes = [{path: '/',name: '首页',component: () => import('../layout')},

2.登录添加跳转

  loginRef.value.validate(async (valid)=>{if(valid){try{let result=await requestUtil.post("login?"+qs.stringify(loginForm.value))let data=result.data;if(data.code==200){const token = data.authorization;store.commit('SET_TOKEN',token);rounter.replace("/")}else{ElMessage.error(data.msg)}}catch(error){console.log("error:"+error);ElMessage.error("服务器出错，请联系管理员！")}}else{console.log("验证失败")}})

3.最终效果

 4.新建结构

 5.主页面index.vue

<template><div class="app-wrapper"><el-container><el-aside width="200px" class="sidebar-container"><Menu/></el-aside><el-container><el-header><Header/></el-header><el-main><Tabs/></el-main><el-footer><Footer/></el-footer></el-container></el-container></div>
</template><script setup>
import Menu from '@/layout/menu'
import Header from '@/layout/header'
import Footer from '@/layout/foot'
import Tabs from '@/layout/tabs'
</script><style lang="scss" scoped>.app-wrapper {position: relative;width: 100%;height: 100%;
}.sidebar-container {background-color: #2d3a4b;height: 100%;
}//修改原有样式
.el-container{height:100%
}.el-header{padding-left: 0px;padding-right: 0px;
}//深度选择器
:deep(ul.el-menu){border-right-width: 0px
}</style>

6.foot

<template><div class="footer">Copyright © 2012-2022 xxx 版权所有&nbsp;&nbsp;<a href="xxx" target="_blank">xxx</a></div>
</template><script setup></script><style lang="scss" scoped>
.footer{padding: 20px;display: flex;align-items: center;
}
</style>

7.tabs

<template><div style="margin-bottom: 20px"><el-button size="small" @click="addTab(editableTabsValue)">add tab</el-button></div><el-tabsv-model="editableTabsValue"type="card"class="demo-tabs"closable@tab-remove="removeTab"><el-tab-panev-for="item in editableTabs":key="item.name":label="item.title":name="item.name">{{ item.content }}</el-tab-pane></el-tabs>
</template>
<script  setup>
import { ref } from 'vue'let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([{title: 'Tab 1',name: '1',content: 'Tab 1 content',},{title: 'Tab 2',name: '2',content: 'Tab 2 content',},
])const addTab = (targetName) => {const newTabName = `${++tabIndex}`editableTabs.value.push({title: 'New Tab',name: newTabName,content: 'New Tab content',})editableTabsValue.value = newTabName
}
const removeTab = (targetName) => {const tabs = editableTabs.valuelet activeName = editableTabsValue.valueif (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {const nextTab = tabs[index + 1] || tabs[index - 1]if (nextTab) {activeName = nextTab.name}}})}editableTabsValue.value = activeNameeditableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>
<style>
.demo-tabs > .el-tabs__content {padding: 32px;color: #6b778c;font-size: 32px;font-weight: 600;
}
</style>