diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6f40582..af144f0 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,15 +1,25 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier/skip-formatting"
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: "latest"
+  },
+  rules: {
+    //使用双引号号，否则警告
+    "quotes": ["warn", "double"],
+    //语句强制分号结尾
+    "semi": [2, "always"],
+    //对象字面量项尾不能有逗号
+    "comma-dangle": [2, "never"],
+    //使用全等号，否则警告
+    "eqeqeq": "warn"
   }
-}
+};
diff --git a/src/App.vue b/src/App.vue
index c6030a0..1239a1c 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/installComponents.ts b/src/installComponents.ts
new file mode 100644
index 0000000..63adbfb
--- /dev/null
+++ b/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
+};
diff --git a/src/main.ts b/src/main.ts
index 7306d32..d602a01 100644
--- a/src/main.ts
+++ b/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)
\ No newline at end of file
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 0d5373b..fa1531c 100644
--- a/src/router/routes.ts
+++ b/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;
\ No newline at end of file
diff --git a/src/views/component/GlobalComponent.vue b/src/views/component/GlobalComponent.vue
new file mode 100644
index 0000000..f9a8654
--- /dev/null
+++ b/src/views/component/GlobalComponent.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <VHeader />
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/views/component/PartComponent.vue b/src/views/component/PartComponent.vue
new file mode 100644
index 0000000..8e8347f
--- /dev/null
+++ b/src/views/component/PartComponent.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file