vue项目: 布局组件开发-AppMenu

14_Vue项目/day-3/vue2-shop/src/layout/components/AppHeader.vue

@@ -5,7 +5,11 @@
       <span :style="{ marginLeft: '6px' }">通用后台管理系统</span>
     </div>
     <div class="right">
-      <el-avatar icon="el-icon-user-solid"></el-avatar>
+      <el-avatar
+        icon="el-icon-user-solid"
+        size="small"
+        :style="{ marginRight: '4px' }"
+      ></el-avatar>
       <el-dropdown>
         <span class="el-dropdown-link">
           超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
@@ -37,6 +41,18 @@
 
 .app-header .right {
   flex: 1;
-  text-align: right;
+
+  display: flex;
+  align-items: center;
+
+  justify-content: flex-end;
+}
+
+.el-dropdown {
+  color: #fff;
+}
+
+.el-dropdown:hover {
+  color: #74b6fb;
 }
 </style>

14_Vue项目/day-3/vue2-shop/src/layout/components/AppMenu.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-menu
+    default-active="0"
+    background-color="#353743"
+    text-color="#fff"
+    active-text-color="#53a8ff"
+    router
+  >
+    <el-menu-item index="0" route="/dashboard">
+      <i class="el-icon-monitor"></i>
+      <span>工作台</span>
+    </el-menu-item>
+    <el-submenu index="1">
+      <template #title>
+        <i class="el-icon-setting"></i>
+        <span>系统管理</span>
+      </template>
+
+      <el-menu-item index="1-1" route="/user">
+        <i class="el-icon-user"></i>
+        <span>用户管理</span>
+      </el-menu-item>
+      <el-menu-item index="1-2" route="/role">
+        <i class="el-icon-coordinate"></i> <span>角色管理</span></el-menu-item
+      >
+      <el-menu-item index="1-3" route="/menu">
+        <i class="el-icon-tickets"></i> <span>菜单管理</span></el-menu-item
+      >
+    </el-submenu>
+  </el-menu>
+</template>

14_Vue项目/day-3/vue2-shop/src/layout/index.vue

@@ -4,18 +4,25 @@
       <AppHeader />
     </el-header>
     <el-container>
-      <el-aside width="200px">Aside</el-aside>
-      <el-main>Main</el-main>
+      <el-aside width="200px">
+        <AppMenu />
+      </el-aside>
+      <el-main>
+        <!-- TabView -->
+        <router-view />
+      </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script>
 import AppHeader from './components/AppHeader.vue';
+import AppMenu from './components/AppMenu.vue';
 export default {
   name: 'Layout',
   components: {
     AppHeader,
+    AppMenu,
   },
 };
 </script>

14_Vue项目/day-3/vue2-shop/src/router/index.js

@@ -14,6 +14,23 @@ const routes = [
     path: '/',
     name: 'home',
     component: Layout,
+    children: [
+      {
+        path: 'dashboard',
+        name: 'dashboard',
+        component: () => import('../views/Dashboard.vue'),
+      },
+      {
+        path: 'user',
+        name: 'user',
+        component: () => import('../views/system/users/index.vue'),
+      },
+      {
+        path: 'role',
+        name: 'role',
+        component: () => import('../views/system/roles/index.vue'),
+      },
+    ],
   },
 ];
 

14_Vue项目/day-3/vue2-shop/src/views/Dashboard.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>xxx上午好，欢迎您使用我们开发的特别牛逼的管理项目，祝您一天愉快！</p>
+  </div>
+</template>

14_Vue项目/day-3/vue2-shop/src/views/system/roles/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>角色管理</p>
+  </div>
+</template>

14_Vue项目/day-3/vue2-shop/src/views/system/users/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <p>用户管理</p>
+  </div>
+</template>