本文详细介绍了如何使用Vue3和Vite从零开始构建一个后台管理系统，包括设置项目结构、配置路由、创建主页面、封装头部和侧边栏组件，以及实现页面跳转。通过实例代码展示了如何建立目录结构、配置路由、构建主页面、封装头部组件和侧边菜单栏，为读者提供了完整的搭建流程。
前言：前面的文章已经讲解了如何从0开始搭建个vue3+vite的项目，今天就为大家分享一下。
如图：
需求：
（1）、构建系统主页面
（2）、封装系统头部
（3）、封装侧边菜单栏
（4）、实现路由页面跳转
一、建立相应目录结构，配置路由
详细介绍几个文件
1、package.json
package.json文件是项目配置文件，除了项目的一些基本信息外，注意一下三点：
（1）dependencies：项目发布时的依赖
（2）devDependencies：项目开发时的依赖
（3）scripts：编译项目的一些命令
2、main.js
这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。
3、App.vue
这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。
配置路由
<span style="color:#333333"><span style="background-color:rgba(0, 0, 0, 0.03)"><code></code><code><span style="color:#ca7d37">import</span> { createRouter, createWebHistory } <span style="color:#ca7d37">from</span> <span style="color:#dd1144">"vue-router"</span>;</code><code></code><code></code><code><span style="color:#ca7d37">const</span> routes = [</code><code> {</code><code> path: <span style="color:#dd1144">'/'</span>,</code><code> redirect: <span style="color:#dd1144">'/Login'</span></code><code> },</code><code> {</code><code> path: <span style="color:#dd1144">"/Login"</span>,</code><code> name: <span style="color:#dd1144">"Login"</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>( <span style="color:#dd1144">"../views/Login/index.vue"</span>)</code><code> },</code><code> {</code><code> path: <span style="color:#dd1144">'/'</span>,</code><code> name: <span style="color:#dd1144">"index"</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>(<span style="color:#dd1144">'@/layout/admin.vue'</span>),</code><code> meta: {title: <span style="color:#dd1144">'admin'</span>},</code><code> children: [</code><code> <span style="color:#afafaf"><em>//首页</em></span></code><code> {</code><code> path: <span style="color:#dd1144">'/Home'</span>,</code><code> name: <span style="color:#dd1144">"首页"</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>(<span style="color:#dd1144">'@/views/home/index.vue'</span>),</code><code> meta: { },</code><code> },</code><code> <span style="color:#afafaf"><em>//系统管理</em></span></code><code> {</code><code> path: <span style="color:#dd1144">'/system'</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>(<span style="color:#dd1144">'@/layout/auto.vue'</span>),</code><code> children: [</code><code> {</code><code> path: <span style="color:#dd1144">'userAdmin'</span>,</code><code> name: <span style="color:#dd1144">"用户管理"</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>(<span style="color:#dd1144">'@/views/System/user_admin/user.vue'</span>),</code><code> meta: { data: [{title: <span style="color:#dd1144">'系统管理'</span>}, {title: <span style="color:#dd1144">'用户管理'</span>}] ,title: <span style="color:#dd1144">'用户管理'</span>},</code><code> },</code><code> {</code><code> path: <span style="color:#dd1144">'roleAdmin'</span>,</code><code> name: <span style="color:#dd1144">"角色管理"</span>,</code><code> component: () => <span style="color:#ca7d37">import</span>(<span style="color:#dd1144">'@/views/System/role_admin/role.vue'</span>),</code><code> meta: { data: [{title: <span style="color:#dd1144">'系统管理'</span>}, {title: <span style="color:#dd1144">'角色管理'</span>}] ,title: <span style="color:#dd1144">'角色管理'</span>},</code><code> },</code><code> ]</code><code> },</code><code></code><code></code><code> ]</code><code> },</code><code>];</code><code></code><code><span style="color:#ca7d37">const</span> router = createRouter({</code><code> history: createWebHistory(),</code><code> routes</code><code>});</code><code></code><code><span style="color:#ca7d37">export</span> <span style="color:#ca7d37">default</span> router;</code><code></code></span></span>二、构建主页面
在src下建立文件夹layout,添加页面admin.vue
<span style="color:#333333"><span style="background-color:rgba(0, 0, 0, 0.03)"><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">Header</span>/></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">Sidebar</span>/></span></code><code> <span style="color:#afafaf"><em><!--main--></em></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">div</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"main-box"</span> <span style="color:#0e9ce5">:class</span>=<span style="color:#dd1144">"{'content-collapse':collapse}"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">transition</span> <span style="color:#0e9ce5">name</span>=<span style="color:#dd1144">"move"</span> <span style="color:#0e9ce5">mode</span>=<span style="color:#dd1144">"out-in"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">router-view</span>/></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">transition</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">div</span>></span></code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">script</span> <span style="color:#0e9ce5">setup</span>></span></code><code><span style="color:#ca7d37">import</span> Header <span style="color:#ca7d37">from</span> <span style="color:#dd1144">'@/layout/Header.vue'</span></code><code><span style="color:#ca7d37">import</span> Sidebar <span style="color:#ca7d37">from</span> <span style="color:#dd1144">"@/layout/Sidebar.vue"</span>;</code><code><span style="color:#ca7d37">let</span> collapse = <span style="color:#0e9ce5">false</span></code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">script</span>></span></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">style</span> <span style="color:#0e9ce5">lang</span>=<span style="color:#dd1144">"less"</span> <span style="color:#0e9ce5">scoped</span>></span></code><code>.main-box{</code><code> position: absolute;</code><code> top:64px;</code><code> left: 256px;</code><code> right:0;</code><code> bottom:0;</code><code> background: #F0F2F5;</code><code> &.content-collapse {</code><code> left: 65px;</code><code> }</code><code>}</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">style</span>></span></code><code></code></span></span>三、封装头部组件
<span style="color:#333333"><span style="background-color:rgba(0, 0, 0, 0.03)"><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">div</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"header"</span>></span></code><code> <span style="color:#afafaf"><em><!--logo--></em></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">div</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"sidebarLogo"</span> @<span style="color:#0e9ce5">click</span>=<span style="color:#dd1144">"$router.push('/')"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">svg</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"img"</span> <span style="color:#0e9ce5">xmlns</span>=<span style="color:#dd1144">"http://www.w3.org/2000/svg"</span> <span style="color:#0e9ce5">viewBox</span>=<span style="color:#dd1144">"-2.0036792755126953 -2.000356674194336 148.0836944580078 132.6103515625"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">title</span>></span>资源 82<span style="color:#0e9ce5"></<span style="color:#0e9ce5">title</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">path</span> <span style="color:#0e9ce5">d</span>=<span style="color:#dd1144">"M72.23 128.61c-7.1-.23-11.51-3.72-14.76-9.36C48 102.87 38.43 86.59 29.1 70.16a36 36 0 0 1-4.47-11.35A14.61 14.61 0 0 1 34 42.51c7.49-2.71 15.71-.21 19.67 6.43 7.52 12.56 14.77 25.27 22.12 37.92 3 5.17 5.89 10.43 9 15.51 5 8 3.45 18-4.22 23.31-2.3 1.62-5.52 1.99-8.34 2.93z"</span> <span style="color:#0e9ce5">fill</span>=<span style="color:#dd1144">"#3CB17D"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">path</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">path</span> <span style="color:#0e9ce5">d</span>=<span style="color:#dd1144">"M72.66.33c6-.57 10.39 2.6 13.51 8C95.61 24.69 105 41.1 114.52 57.4c3.9 6.65-.28 17.13-6.39 20.44-8.93 4.83-17.88 1.28-21.86-5.62C76.82 55.86 67.14 39.62 58.11 23 52.06 12 59.61.24 72.66.33z"</span> <span style="color:#0e9ce5">fill</span>=<span style="color:#dd1144">"#35495E"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">path</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">path</span> <span style="color:#0e9ce5">d</span>=<span style="color:#dd1144">"M144.08 15.83c-.58 8.62-6.73 15.57-15.51 15.66-9.31.09-16.87-7-16.95-15.62S119 0 127.87 0c9.13.09 16.22 7 16.21 15.83z"</span> <span style="color:#0e9ce5">fill</span>=<span style="color:#dd1144">"#fbb355"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">path</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">path</span> <span style="color:#0e9ce5">d</span>=<span style="color:#dd1144">"M16.24 31.5C7 31.33-.19 24.42 0 15.8.19 7.5 7.19-.06 14.64 0c10.53.08 18.27 6.73 17.61 15.9-.64 8.96-6.25 15.28-16.01 15.6z"</span> <span style="color:#0e9ce5">fill</span>=<span style="color:#dd1144">"#EE3667"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">path</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">svg</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">span</span>></span>VueFastDev<span style="color:#0e9ce5"></<span style="color:#0e9ce5">span</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">div</span>></span></code><code> <span style="color:#afafaf"><em><!--退出等--></em></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">div</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"admin-btn"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">span</span>></span>欢迎您,管理员!<span style="color:#0e9ce5"></<span style="color:#0e9ce5">span</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">span</span> @<span style="color:#0e9ce5">click</span>=<span style="color:#dd1144">"logout"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">i</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"icon zhb-iconfont zhb-icontuichu"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">i</span>></span>退出<span style="color:#0e9ce5"></<span style="color:#0e9ce5">span</span>></span></code><code></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">div</span>></span></code><code> <span style="color:#afafaf"><em><!--到底啦！============================= --></em></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">div</span>></span></code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">script</span> <span style="color:#0e9ce5">setup</span>></span></code><code><span style="color:#ca7d37">import</span> {useRouter} <span style="color:#ca7d37">from</span> <span style="color:#dd1144">'vue-router'</span></code><code></code><code><span style="color:#ca7d37">const</span> router = useRouter()</code><code><span style="color:#afafaf"><em>//退出登录</em></span></code><code><span style="color:#ca7d37">const</span> logout = () => {</code><code> router.push(<span style="color:#dd1144">'/login'</span>)</code><code>}</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">script</span>></span></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">style</span> <span style="color:#0e9ce5">lang</span>=<span style="color:#dd1144">"less"</span>></span></code><code>.header {</code><code> background-color: #ffffff;</code><code> position: relative;</code><code> box-sizing: border-box;</code><code> width: 100%;</code><code> height: 64px;</code><code> font-size: 22px;</code><code> color: #000;</code><code> display: flex;</code><code> align-items: center;</code><code> .sidebarLogo{</code><code> width: 256px;</code><code> height: 64px;</code><code> display: flex;</code><code> align-items: center;</code><code> justify-content: flex-start;</code><code> background: #00284D;</code><code> /*border-right:1px solid #2E405B;*/</code><code> box-sizing: border-box;</code><code> cursor:pointer;</code><code> &.collapse{width: 65px;}</code><code> }</code><code> .sidebarLogo .img{</code><code> /*width: 130px;*/</code><code> height: 38px;</code><code> vertical-align: middle;</code><code> margin-left: 22px;</code><code> }</code><code> .sidebarLogo span{</code><code> color: #ffffff;</code><code> font-size:23px;</code><code> letter-spacing: 1px;</code><code> margin-left: 15px;</code><code> }</code><code> .el-breadcrumb__item{</code><code> cursor: pointer!important;</code><code> }</code><code> .el-breadcrumb__inner{</code><code> cursor: default!important;</code><code> }</code><code>}</code><code></code><code>.collapse-btn {</code><code> cursor: pointer;</code><code> height: 64px;</code><code> display: flex;</code><code> align-items: center;</code><code> /*border-right: 1px solid #2e405b;*/</code><code> /*border-left: 1px solid #2e405b;*/</code><code> box-sizing: border-box;</code><code> color:rgba(0,0,0,.65);</code><code>}</code><code></code><code>.collapse-btn i {</code><code> padding: 0 21px;</code><code> display: block;</code><code> font-size: 25px;</code><code> /*color: #abb0b8;*/</code><code>}</code><code></code><code>.admin-btn {</code><code> position: absolute;</code><code> right: 20px;</code><code> display: flex;</code><code> align-items: center;</code><code> span{</code><code> margin-left: 10px;</code><code> font-size: 14px;</code><code> //color:#ffffff;</code><code> &:nth-of-type(2){</code><code> margin-left: 15px;</code><code> cursor: pointer;</code><code> }</code><code> }</code><code>}</code><code></code><code></code><code></code><code>.el-breadcrumb__item:last-child .el-breadcrumb__inner {</code><code> color: #8d8d8d;</code><code> cursor: pointer;</code><code>}</code><code></code><code>.top-menu-list {</code><code> margin-left: 15px;</code><code> font-size: 14px;</code><code> span {</code><code> padding: 0 10px;</code><code> color:#1d73f6;</code><code> display: inline-block;</code><code> line-height: 59px;</code><code> margin: 0 20px 0 0;</code><code> &:hover {</code><code> cursor: pointer;</code><code> color: #1d73f6;</code><code> line-height: 49px;</code><code> border-bottom: 5px solid #1d73f6;</code><code> }</code><code> &.on {</code><code> color: #1d73f6;</code><code> line-height: 49px;</code><code> border-bottom: 5px solid #1d73f6;</code><code> }</code><code> }</code><code>}</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">style</span>></span></code><code></code></span></span>四、封装侧边栏组件
<span style="color:#333333"><span style="background-color:rgba(0, 0, 0, 0.03)"><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-aside</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"sidebar"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-menu</span></span></code><code> class=<span style="color:#dd1144">"sidebar-el-menu"</span></code><code> :default-active=<span style="color:#dd1144">"onRoutes"</span></code><code> :collapse=<span style="color:#dd1144">"collapse"</span></code><code> background-color=<span style="color:#dd1144">"#001529"</span></code><code> text-color=<span style="color:#dd1144">"rgba(255,255,255,.7)"</span></code><code> active-text-color=<span style="color:#dd1144">"#fff"</span></code><code> unique-opened</code><code> router</code><code> :class=<span style="color:#dd1144">"{ collapse: collapse }"</span></code><code> ></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span> <span style="color:#0e9ce5">v-for</span>=<span style="color:#dd1144">"item in menuData"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span> <span style="color:#0e9ce5">v-if</span>=<span style="color:#dd1144">"item.subs"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-submenu</span> <span style="color:#0e9ce5">:index</span>=<span style="color:#dd1144">"item.index"</span> <span style="color:#0e9ce5">:key</span>=<span style="color:#dd1144">"item.index"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-menu-item</span> <span style="color:#0e9ce5">slot</span>=<span style="color:#dd1144">"title"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">i</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"icon zhb-iconfont"</span> <span style="color:#0e9ce5">:class</span>=<span style="color:#dd1144">"item.icon"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">i</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">span</span> <span style="color:#0e9ce5">slot</span>=<span style="color:#dd1144">"title"</span>></span>{{ item.title }}<span style="color:#0e9ce5"></<span style="color:#0e9ce5">span</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-menu-item</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span> <span style="color:#0e9ce5">v-for</span>=<span style="color:#dd1144">"subItem in item.subs"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-submenu</span> <span style="color:#0e9ce5">v-if</span>=<span style="color:#dd1144">"subItem.subs"</span> <span style="color:#0e9ce5">:index</span>=<span style="color:#dd1144">"subItem.index"</span> <span style="color:#0e9ce5">:key</span>=<span style="color:#dd1144">"subItem.index"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span> <span style="color:#0e9ce5">slot</span>=<span style="color:#dd1144">"title"</span>></span>{{ subItem.title }}<span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-menu-item</span></span></code><code> v-for=<span style="color:#dd1144">"(threeItem,i) in subItem.subs"</span></code><code> :key=<span style="color:#dd1144">"i"</span></code><code> :index=<span style="color:#dd1144">"threeItem.index"</span></code><code> >{{ threeItem.title }}<span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-menu-item</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-submenu</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-menu-item</span> <span style="color:#0e9ce5">v-else</span> <span style="color:#0e9ce5">:index</span>=<span style="color:#dd1144">"subItem.index"</span> <span style="color:#0e9ce5">:key</span>=<span style="color:#dd1144">"subItem.index"</span>></span>{{ subItem.title }}<span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-menu-item</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-submenu</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">template</span> <span style="color:#0e9ce5">v-else</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">el-menu-item</span> <span style="color:#0e9ce5">:index</span>=<span style="color:#dd1144">"item.index"</span> <span style="color:#0e9ce5">:key</span>=<span style="color:#dd1144">"item.index"</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">i</span> <span style="color:#0e9ce5">class</span>=<span style="color:#dd1144">"icon zhb-iconfont"</span> <span style="color:#0e9ce5">:class</span>=<span style="color:#dd1144">"item.icon"</span>></span><span style="color:#0e9ce5"></<span style="color:#0e9ce5">i</span>></span></code><code> <span style="color:#0e9ce5"><<span style="color:#0e9ce5">span</span> <span style="color:#0e9ce5">slot</span>=<span style="color:#dd1144">"title"</span>></span>{{ item.title }}<span style="color:#0e9ce5"></<span style="color:#0e9ce5">span</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-menu-item</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-menu</span>></span></code><code> <span style="color:#0e9ce5"></<span style="color:#0e9ce5">el-aside</span>></span></code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">template</span>></span></code><code></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">script</span> <span style="color:#0e9ce5">setup</span>></span></code><code><span style="color:#ca7d37">import</span> { computed } <span style="color:#ca7d37">from</span> <span style="color:#dd1144">"vue"</span></code><code><span style="color:#ca7d37">import</span> { useRoute } <span style="color:#ca7d37">from</span> <span style="color:#dd1144">'vue-router'</span></code><code><span style="color:#ca7d37">const</span> route = useRoute()</code><code> <span style="color:#ca7d37">let</span> collapse = <span style="color:#0e9ce5">false</span></code><code> <span style="color:#ca7d37">let</span> menuData = [</code><code> {</code><code> icon: <span style="color:#dd1144">"zhb-iconshouye-shouye"</span>,</code><code> index: <span style="color:#dd1144">"/Home"</span>,</code><code> title: <span style="color:#dd1144">"首页"</span>,</code><code> },</code><code> {</code><code> icon: <span style="color:#dd1144">"zhb-iconxitongguanli"</span>,</code><code> index: <span style="color:#dd1144">"/system"</span>,</code><code> title: <span style="color:#dd1144">"系统管理"</span>,</code><code> subs:[</code><code> {</code><code> index: <span style="color:#dd1144">"/system/userAdmin"</span>,</code><code> title: <span style="color:#dd1144">"用户管理"</span>,</code><code> },</code><code> {</code><code> index: <span style="color:#dd1144">"/system/roleAdmin"</span>,</code><code> title: <span style="color:#dd1144">"角色管理"</span>,</code><code> },</code><code> ]</code><code> },</code><code> ]</code><code><span style="color:#ca7d37">const</span> onRoutes = computed( ()=>{</code><code> <span style="color:#ca7d37">const</span> { meta,path } = route</code><code> <span style="color:#ca7d37">if</span>(meta.activeMenu){</code><code> <span style="color:#ca7d37">return</span> meta.activeMenu</code><code> }</code><code></code><code> <span style="color:#ca7d37">return</span> path</code><code>})</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">script</span>></span></code><code></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">style</span> <span style="color:#0e9ce5">lang</span>=<span style="color:#dd1144">"less"</span> <span style="color:#0e9ce5">scoped</span>></span></code><code>.sidebar {</code><code> width: 256px!important;</code><code> height: calc(100% - 64px);</code><code> background-color: #001529;</code><code> overflow: hidden;</code><code> overflow-y: auto;</code><code> -ms-overflow-style: none;</code><code> overflow: -moz-scrollbars-none;</code><code>}</code><code>.aside::-webkit-scrollbar {</code><code> display: none;</code><code>}</code><code></code><code></code><code>.sidebar {</code><code> width: 256px;</code><code> display: block;</code><code> position: absolute;</code><code> left: 0;</code><code> top: 64px;</code><code> bottom: 0;</code><code> overflow-y: scroll;</code><code> padding-top: 15px;</code><code> background: #001529;</code><code>}</code><code>.sidebar::-webkit-scrollbar {</code><code> width: 0;</code><code>}</code><code>.sidebar-el-menu:not(.el-menu--collapse) {</code><code> width: 100%;</code><code></code><code>}</code><code>.sidebar-el-menu{</code><code> &.collapse{</code><code> width: 65px;</code><code> }</code><code>}</code><code>.sidebar > ul {</code><code> height: 100%;</code><code>}</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">style</span>></span></code><code><span style="color:#0e9ce5"><<span style="color:#0e9ce5">style</span> <span style="color:#0e9ce5">lang</span>=<span style="color:#dd1144">"less"</span>></span></code><code>.sidebar{</code><code> .el-menu{</code><code> .el-menu-item{</code><code> text-align: left!important;</code><code></code><code> &:hover{</code><code> color: #ffffff !important;</code><code> background-color: #1890FF !important;</code><code></code><code> }</code><code> &.is-active {</code><code> color: #ffffff !important;</code><code> background-color: #1890FF !important;</code><code></code><code> }</code><code> }</code><code></code><code> .el-submenu{</code><code> .el-submenu__title{</code><code> text-align: left!important;</code><code></code><code> &:hover{</code><code> color: #ffffff !important;</code><code> background-color: #1890FF !important;</code><code></code><code> }</code><code> }</code><code></code><code> }</code><code></code><code></code><code> .el-scrollbar__bar.is-horizontal{</code><code> display: none!important;</code><code> }</code><code> .el-menu-item, .el-submenu__title{</code><code> height: 40px!important;</code><code> line-height: 40px!important;</code><code> }</code><code> }</code><code> .el-menu-item i,.el-submenu__title i{</code><code> margin-right: 10px;</code><code> }</code><code>}</code><code><span style="color:#0e9ce5"></<span style="color:#0e9ce5">style</span>></span></code></span></span>四、在src下建立文件夹views 配置相关页面
完成上述操作，后台管理系统就完成了！
最后，感谢您的阅读。
你学到了什么，欢迎补充！！
欢迎大家留言讨论，祝工作顺利、生活愉快！
扫一扫
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
