add router

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# not sure why it's necessary, but it's really annoying
+src/types/components.d.ts

src/App.vue

@@ -1,8 +1,7 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-<div></div>
+  <router-view></router-view>
 </template>
 
 <style>

src/components/MainLayout/MainLayout.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>layout</div>
+  <div><router-view></router-view></div>
+</template>
+
+<style scoped></style>

src/components/PageError404.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="tw-text-center tw-text-3xl">页面没找到(404)</div>
+</template>
+
+<script setup lang="ts"></script>

src/features/ChangePassword/ChangePassword.vue

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

src/features/UserLogin/UserLogin.vue

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

src/main.ts

@@ -1,11 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-// import router from "@/router";
+import router from "@/router";
 import { createPinia } from "pinia";
 
-createApp(App).mount("#app");
-
 const app = createApp(App);
-// app.use(router);
+app.use(router);
 app.use(createPinia());
 app.mount("#app");

src/router/index.ts

@@ -0,0 +1,35 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import UserLogin from "@/features/UserLogin/UserLogin.vue";
+import MainLayout from "@/components/MainLayout/MainLayout.vue";
+import ChangePassword from "@/features/ChangePassword/ChangePassword.vue";
+
+const routes: RouteRecordRaw[] = [
+  { path: "/", component: UserLogin },
+  { path: "/login", component: UserLogin, name: "UserLogin" },
+  {
+    path: "/",
+    component: MainLayout,
+    children: [
+      {
+        path: "password",
+        component: ChangePassword,
+      },
+    ],
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: () => import("@/components/PageError404.vue"),
+  },
+];
+
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: createWebHistory("web"),
+  routes, // short for `routes: routes`
+});
+
+export default router;

tsconfig.json

@@ -24,7 +24,6 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "src/*.vue",
-    "*.js",
-    "components.d.ts"
+    "*.js"
   ]
 }

vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     }),
     ViteComponents({
       resolvers: [AntDesignVueResolver()],
-      dts: true,
+      dts: "src/types/components.d.ts",
     }),
   ],
   server: {