使用路由

components.d.ts

@@ -8,6 +8,14 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
   }
 }

package.json

@@ -13,7 +13,8 @@
     "@vueuse/core": "^9.5.0",
     "element-plus": "^2.2.21",
     "unplugin-icons": "^0.14.13",
-    "vue": "^3.2.41"
+    "vue": "^3.2.41",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",

src/App.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core'
-import { Sunny, Moon } from '@element-plus/icons-vue'
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <el-switch v-model="isDark"
-             inline-prompt
-             size="large"
-             :active-icon="Moon"
-             :inactive-icon="Sunny" />
+  <router-view></router-view>
 </template>
 
 <style scoped>

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/layouts/home.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <el-container>
+    <el-header>
+      你好，世界
+    </el-header>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
+    <el-footer>
+      BY:枫叶秋林
+    </el-footer>
+  </el-container>
+</template>
+
+<style scoped>
+</style>

src/main.ts

@@ -1,4 +1,10 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import "element-plus/theme-chalk/dark/css-vars.css";
-createApp(App).mount("#app");
+import router, { setupRouter } from "./plugins/router";
+function bootstrap() {
+  const app = createApp(App);
+  setupRouter(app);
+  app.mount("#app");
+}
+bootstrap();

src/plugins/router.ts

@@ -0,0 +1,16 @@
+import { App } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      component: () => import("../layouts/home.vue"),
+    },
+  ],
+});
+export function setupRouter(app: App<Element>) {
+  app.use(router);
+}
+export default router;