import ts

src/components/Header.vue

@@ -10,7 +10,11 @@
       <div class="header-user-con">
         <!-- 消息中心 -->
         <div class="btn-bell">
-                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+          <el-tooltip
+            effect="dark"
+            :content="message ? `有${message}条未读消息` : `消息中心`"
+            placement="bottom"
+          >
             <router-link to="/tabs">
               <i class="el-icon-bell"></i>
             </router-link>
@@ -24,16 +28,21 @@
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" trigger="click" @command="handleCommand">
           <span class="el-dropdown-link">
-                        {{username}}
+            {{ username }}
             <i class="el-icon-caret-bottom"></i>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-                            <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+              <a
+                href="https://github.com/lin-xin/vue-manage-system"
+                target="_blank"
+              >
                 <el-dropdown-item>项目仓库</el-dropdown-item>
               </a>
               <el-dropdown-item command="user">个人中心</el-dropdown-item>
-                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+              <el-dropdown-item divided command="loginout"
+                >退出登录</el-dropdown-item
+              >
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -42,13 +51,13 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 export default {
   setup() {
     const username = localStorage.getItem("ms_username");
-        const message = 2;
+    const message = ref(2);
 
     const store = useStore();
     const collapse = computed(() => store.state.collapse);

src/components/Sidebar.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="sidebar">
-        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
-            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
+    <el-menu
+      class="sidebar-el-menu"
+      :default-active="onRoutes"
+      :collapse="collapse"
+      background-color="#324157"
+      text-color="#bfcbd9"
+      active-text-color="#20a0ff"
+      unique-opened
+      router
+    >
       <template v-for="item in items">
         <template v-if="item.subs">
           <el-submenu :index="item.index" :key="item.index">
@@ -10,12 +18,22 @@
               <span>{{ item.title }}</span>
             </template>
             <template v-for="subItem in item.subs">
-                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+              <el-submenu
+                v-if="subItem.subs"
+                :index="subItem.index"
+                :key="subItem.index"
+              >
                 <template #title>{{ subItem.title }}</template>
-                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
-                                    {{ threeItem.title }}</el-menu-item>
+                <el-menu-item
+                  v-for="(threeItem, i) in subItem.subs"
+                  :key="i"
+                  :index="threeItem.index"
+                >
+                  {{ threeItem.title }}</el-menu-item
+                >
               </el-submenu>
-                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index"
+                >{{ subItem.title }}
               </el-menu-item>
             </template>
           </el-submenu>
@@ -32,12 +50,26 @@
 </template>
 
 <script lang="ts">
-import { computed, watch } from "vue";
+import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
-export default {
+
+interface menuItem {
+  icon: string;
+  index: string;
+  title: string;
+  subs?: subItem[];
+}
+
+interface subItem {
+  index: string;
+  title: string;
+  subs?: subItem[];
+}
+
+export default defineComponent({
   setup() {
-        const items = [
+    const items: menuItem[] = [
       {
         icon: "el-icon-lx-home",
         index: "/dashboard",
@@ -130,7 +162,7 @@ export default {
       collapse,
     };
   },
-};
+});
 </script>
 
 <style scoped>