feat: 更新

.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': [
+  "extends": [
-    'plugin:vue/vue3-essential',
+    "plugin:vue/vue3-essential",
-    'eslint:recommended',
+    "eslint:recommended",
-    '@vue/eslint-config-typescript',
+    "@vue/eslint-config-typescript",
-    '@vue/eslint-config-prettier/skip-formatting'
+    "@vue/eslint-config-prettier/skip-formatting"
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: "latest"
+  },
+  rules: {
+    //使用双引号号，否则警告
+    "quotes": ["warn", "double"],
+    //语句强制分号结尾
+    "semi": [2, "always"],
+    //对象字面量项尾不能有逗号
+    "comma-dangle": [2, "never"],
+    //使用全等号，否则警告
+    "eqeqeq": "warn"
   }
-}
+};

src/App.vue

@@ -17,27 +17,29 @@
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
-import routes from '@/router/routes'
+import routes from "@/router/routes";
-import Layout from './components/Layout.vue'
+import Layout from "./components/Layout.vue";
-import VHeader from './components/VHeader.vue'
+// import VHeader from './components/VHeader.vue'
-import SideMenu from './components/SideMenu.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>