feat: 更新

src/App.vue

@@ -1,43 +1,45 @@
 <template>
-  <Layout class="app-layout" :siderWidth="260">
-    <template #header>
-        <VHeader />
-    </template>
-    <template #sider>
-        <div class="app-layout-sider">
-            <SideMenu :data="routes" class="app-layout-menu" />
-        </div>
-    </template>
-    <template #content>
-        <div class="app-layout-content">
-        <RouterView />
-        </div>
-    </template>
-  </Layout>
+    <Layout class="app-layout" :siderWidth="260">
+        <template #header>
+            <VHeader />
+        </template>
+        <template #sider>
+            <div class="app-layout-sider">
+                <SideMenu :data="routes" class="app-layout-menu" />
+            </div>
+        </template>
+        <template #content>
+            <div class="app-layout-content">
+                <RouterView />
+            </div>
+        </template>
+    </Layout>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
-import routes from '@/router/routes'
-import Layout from './components/Layout.vue'
-import VHeader from './components/VHeader.vue'
-import SideMenu from './components/SideMenu.vue'
+import { RouterView } from "vue-router";
+import routes from "@/router/routes";
+import Layout from "./components/Layout.vue";
+// import VHeader from './components/VHeader.vue'
+import SideMenu from "./components/SideMenu.vue";
 </script>
 
 <style scoped lang="less">
 .app-layout {
     height: 100%;
+
     &-sider {
         height: 100%;
         box-sizing: border-box;
         border-right: 1px solid #eee;
     }
+
     &-menu {
         padding: 20px 10px;
     }
+
     &-content {
         padding: 20px;
         font-size: 20px;
     }
-}
-</style>
+}</style>

src/installComponents.ts

@@ -0,0 +1,10 @@
+import type { App } from "vue";
+import VHeader from "./components/VHeader.vue";
+
+const install = function (app: App) {
+    app.component("VHeader", VHeader)
+};
+
+export {
+    install
+};

src/main.ts

@@ -3,12 +3,13 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
+import { install } from "./installComponents";
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-
+install(app)
 app.mount('#app')
 
 console.log("-------", import.meta.env)

src/router/routes.ts

@@ -2,7 +2,7 @@ const routes = [
   {
     path: "/",
     name: "app",
-    redirect: "/reactivity",
+    redirect: "/reactivity"
   },
   { 
     path: "/reactivity", 
@@ -59,7 +59,7 @@ const routes = [
         name: "computedAdvan", 
         meta: { title: "computed双向绑定" }, 
         component: () => import("@/views/computed/ComputedAdvan.vue")
-      },
+      }
     ]
   },
   { 
@@ -103,9 +103,29 @@ const routes = [
         name: "watchStop", 
         meta: { title: "watch停止侦听器" }, 
         component: () => import("@/views/watch/WatchStop.vue")
-      },
+      }
     ]
   },
+  { 
+    path: "/component", 
+    name: "component", 
+    meta: { title: "组件" }, 
+    redirect: "/component/global",
+    children: [
+      { 
+        path: "/component/global", 
+        name: "globalComponent", 
+        meta: { title: "全局组件" }, 
+        component: () => import("@/views/component/GlobalComponent.vue")
+      },
+      { 
+        path: "/component/part", 
+        name: "partComponent", 
+        meta: { title: "局部组件" }, 
+        component: () => import("@/views/component/PartComponent.vue")
+      }
+    ]
+  }
 ];
 
 export default routes;

src/views/component/GlobalComponent.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <VHeader />
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/component/PartComponent.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>