側(cè)邊欄導(dǎo)航
vue3搭配Element Plus框架使用
Element Plus基于 Vue 3,面向設(shè)計(jì)師和開(kāi)發(fā)者的組件庫(kù)
文檔:https://element-plus.gitee.io/zh-CN/
安裝
# NPM
$ npm install element-plus --save
圖片.png
安裝完成之后開(kāi)始引入
打開(kāi)main.js的文件
這里接口文檔上是有說(shuō)明的 茵休,直接根據(jù)文檔上的教程來(lái)寫(xiě)
圖片.png
main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
開(kāi)始使用組件里面的布局
后臺(tái)管理的布局
直接復(fù)制代碼即可
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
LayOut.vue
<template>
<div>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<router-link to="/index">角色列表</router-link>
<router-link to="/user">用戶(hù)列表</router-link></el-aside
>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script>
export default {
name: "layout",
setup() {},
};
</script>
優(yōu)化css
LayOut.vue
<template>
<div>
<div class="common-layout">
<el-container>
<el-header class="common-header flex-float">
<div class="flex">
<img class="logo" src="../../assets/logo.png" alt="">
<h1 class="title">商鋪后臺(tái)管理系統(tǒng)</h1>
</div>
<el-button type="danger">退出</el-button>
</el-header>
<el-container>
<el-aside class="common-aside " width="200px">
<router-link to="/index">角色列表</router-link>
<router-link to="/user">用戶(hù)列表</router-link></el-aside
>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script>
export default {
name: "layout",
setup() {},
};
</script>
<style >
.el-container {
height: 100vh;
overflow: hidden;
}
.common-header {
background: rgb(63 67 72);
}
.common-aside {
background: rgb(48, 55, 65);
}
.logo{
width:60px;
}
.title{
color: #fff;
}
</style>
app.vue里面寫(xiě)一個(gè)全局的flex布局
<template>
<router-view />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
/* flex布局 */
.flex-float {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex {
display: flex;
align-items: center;
}
</style>
到這里 后臺(tái)管理系統(tǒng) 的框架初具模型 繼續(xù)編寫(xiě)代碼
繼續(xù)編寫(xiě)左側(cè)的導(dǎo)航菜單
文檔里面都是有代碼可以直接拿過(guò)來(lái)使用的
根據(jù)menu菜單 的屬性 進(jìn)行一些代碼的優(yōu)化
設(shè)置router
是否啟用 vue-router 模式。 啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) 使用 default-active 來(lái)設(shè)置加載時(shí)的激活項(xiàng)幻梯。
完善之后的導(dǎo)航欄
<template>
<div>
<div class="common-layout">
<el-container>
<el-header class="common-header flex-float">
<div class="flex">
<img class="logo" src="../../assets/logo.png" alt="" />
<h1 class="title">商鋪后臺(tái)管理系統(tǒng)</h1>
</div>
<el-button type="danger">退出</el-button>
</el-header>
<el-container>
<el-aside class="common-aside" width="200px">
<el-menu background-color="none" text-color="#fff" :router="true">
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>賬號(hào)管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/user">用戶(hù)列表</el-menu-item>
<!-- <el-menu-item index="1-2">item two</el-menu-item> -->
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><location /></el-icon>
<span>角色管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/role">角色列表</el-menu-item>
<!-- <el-menu-item index="1-2">item two</el-menu-item> -->
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-aside>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script>
export default {
name: "layout",
setup() {},
};
</script>
<style >
.el-container {
height: 100vh;
overflow: hidden;
}
.common-header {
background: rgb(63 67 72);
}
.common-aside {
background: rgb(48, 55, 65);
}
.logo {
width: 60px;
}
.title {
color: #fff;
}
</style>
index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'layOut',
// redirect: "/index",//重定向 進(jìn)來(lái)就自動(dòng)默認(rèn)到index路徑
component: () => import('../views/LayOut/LayOut.vue'),
//嵌套路由/子路由
children: [
{
path: "/role",
name: "role",
component: () => import('../views/pages/roleList.vue'),
}, {
path: "/user",
name: "user",
component: () => import('../views/pages/userList.vue'),
}
]
},
{
path: '/home',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router