工欲善其事必先利其器

src/components/appsNav.vue

@@ -0,0 +1,46 @@
+<script>
+export default {
+  name: "appsNav",
+  data() {
+    return {
+      menu: []
+    }
+  },
+  created() {
+    this.menu = localStorage.getItem('routes') ? JSON.parse(localStorage.getItem('routes')) : []
+  }
+}
+</script>
+
+<template>
+  <div class="appsNav">
+    <img src="../assets/logo.svg" class="logo"/>
+    <div class="item pointer" v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
+  </div>
+</template>
+<style scoped>
+.appsNav {
+  width: 200px;
+  height: 100vh;
+  background: #f3f6f9;
+}
+
+.item {
+  line-height: 32px;
+  border-top: 1px solid #ddd;
+  font-size: 14px;
+  font-weight: bold;
+  user-select: none;
+  padding: 0 16px;
+}
+
+.item:hover {
+  opacity: .8;
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  margin: 10px calc(50% - 20px);
+}
+</style>

src/components/menu.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  name: "menu",
-  data() {
-    return {
-      menu: []
-    }
-  },
-  created() {
-    this.menu = localStorage.getItem('routes') ? JSON.parse(localStorage.getItem('routes')) : []
-  }
-}
-</script>
-
-<template>
-  <div class="menu">
-    <div v-for="item in menu" :key="item.name" v-text="item.label" @click="$router.push({name: item.name})"/>
-  </div>
-</template>
-<style scoped>
-.menu {
-  width: 200px;
-  height: 100vh;
-  background: #f3f6f9;
-}
-</style>