vue3-后台布局
搭建完了注册登录以后,接下来我们就可以进入我们的主页面搭建我们的后台布局了
1、搭建页面
☞ src=> pages => admin.vue 存放我们的后台主页部分
2、配置路由
☞ 配置好我们的路由,就可以访问我们的后台主页了
router => index.ts 里面配置路由
刷新以后,这个时候我们已经可以看到我们的后台主页
3、搭建主体框架
<template>
<div>
<div class="contbox">
<div class="leftaside lnavboxshadow">
<div class="llogo">
LOGO
</div>
<div class="lnavbody">
</div>
</div>
<div class="rightaside">
<div class="rnavheader bboxshadow">
</div>
<div class="rnavbody lboxshadow">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
</script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
搭建好主体框架以后,我们就可以去配置我们的侧边栏和头部了
4、引入侧边栏和头部
侧边栏 => layout => leftAside => index.vue
头部 => layout => topNav => index.vue
然后放进去我们的主页
<template>
<div class="pageadmin backbaige">
<div class="page-aside-left lnavboxshadow">
<div class="page-aside-logo">
LOGO
</div>
<div class="page-aside-menu">
<leftAside></leftAside>
</div>
</div>
<div class="page-aside-right">
<div class="page-main-head bboxshadow">
<topNav></topNav>
</div>
<el-header style="background: #fff;">头部</el-header>
<div class="page-main-body lboxshadow" style="height: calc(100% - 180px);">
<router-view>
显示页面
</router-view>
</div>
<el-footer style="background: #fff;">底部</el-footer>
</div>
</div>
</template>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
最后效果就是这样子的
5、顶部栏开发
顶部layout=> topNav => index.vue
☞ 添加一个退出登录
<template>
<div>
<el-button type="primary" style="margin: 20px 0px;float: right;" @click="handleLoginOut">退出登录</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {useRouter} from 'vue-router'
import { getToken, setToken, removeToken } from '@/utils/auth'
const userStore = useUserStore()
const router=useRouter();
const handleLoginOut=()=>{
console.log('退出登录');
removeToken();
location.href = '/login';
}
</script>
<style type="text/css">
</style>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
☞ 简单封装顶部栏
<template>
<div class="pagetopNav">
<div>
<div class="tag" style="line-height: 40px;margin: 10px 0px">{{'当前登录用户:'+userStore.name}}</div>
</div>
<div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="avatar-user" />
</div>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item>
<span @click="handleLoginOut">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {useRouter} from 'vue-router'
import useUserStore from '@/store/modules/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { ElMessageBox } from 'element-plus'
const userStore = useUserStore()
const router=useRouter();
const handleLoginOut=()=>{
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('退出登录');
userStore.logOut().then(() => {
location.href = '/login';
})
}).catch(() => { });
}
onMounted(async () => {
useUserStore().getInfo().then(() => {
}).catch(err => {})
});
</script>
<style type="text/css">
.pagetopNav{
line-height: 60px;
display: flex;justify-content: flex-end;gap:20px;
}
.avatar-wrapper{
padding: 10px;
}
.avatar-user {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
</style>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
最后的效果