侧边栏导航
vue3搭配Element Plus框架使用
Element Plus基于 Vue 3，面向设计师和开发者的组件库
文档：https://element-plus.gitee.io/zh-CN/
安装
# NPM $ npm install element-plus --save
图片.png
安装完成之后开始引入
打开main.js的文件
这里接口文档上是有说明的 ，直接根据文档上的教程来写
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')
开始使用组件里面的布局
后台管理的布局
直接复制代码即可
<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">用户列表</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>
优化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">商铺后台管理系统</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">用户列表</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里面写一个全局的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>
到这里 后台管理系统 的框架初具模型 继续编写代码
继续编写左侧的导航菜单
文档里面都是有代码可以直接拿过来使用的
根据menu菜单 的属性 进行一些代码的优化
设置router
是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。
完善之后的导航栏
<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">商铺后台管理系统</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>账号管理</span> </template> <el-menu-item-group> <el-menu-item index="/user">用户列表</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",//重定向 进来就自动默认到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
