feat: 暂存

src/assets/style/index.scss

@@ -1,5 +1,2 @@
 /** 全局样式 */
 @use "./global.scss";
-
-/** 引入tailwindcss */
-@import "./tailwind.css";

src/components/HelloWorld.vue

@@ -1,93 +1,16 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import viteLogo from "../assets/vite.svg";
-import heroImg from "../assets/hero.png";
-import vueLogo from "../assets/vue.svg";
 
 const count = ref(0);
 </script>
 
 <template>
-  <section id="center">
-    <div class="hero">
-      <img :src="heroImg" class="base" width="170" height="179" alt="" />
-      <img :src="vueLogo" class="framework" alt="Vue logo" />
-      <img :src="viteLogo" class="vite" alt="Vite logo" />
-    </div>
+  <section id="center" class="bg-amber-200">
     <div>
       <h1>Get started</h1>
       <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
     </div>
     <button type="button" class="counter" @click="count++">Count is {{ count }}</button>
   </section>
-
-  <div class="ticks"></div>
-
-  <section id="next-steps">
-    <div id="docs">
-      <svg class="icon" role="presentation" aria-hidden="true">
-        <use href="/icons.svg#documentation-icon"></use>
-      </svg>
-      <h2>Documentation</h2>
-      <p>Your questions, answered</p>
-      <ul>
-        <li>
-          <a href="https://vite.dev/" target="_blank">
-            <img class="logo" :src="viteLogo" alt="" />
-            Explore Vite
-          </a>
-        </li>
-        <li>
-          <a href="https://vuejs.org/" target="_blank">
-            <img class="button-icon" :src="vueLogo" alt="" />
-            Learn more
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div id="social">
-      <svg class="icon" role="presentation" aria-hidden="true">
-        <use href="/icons.svg#social-icon"></use>
-      </svg>
-      <h2>Connect with us</h2>
-      <p>Join the Vite community</p>
-      <ul>
-        <li>
-          <a href="https://github.com/vitejs/vite" target="_blank">
-            <svg class="button-icon" role="presentation" aria-hidden="true">
-              <use href="/icons.svg#github-icon"></use>
-            </svg>
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://chat.vite.dev/" target="_blank">
-            <svg class="button-icon" role="presentation" aria-hidden="true">
-              <use href="/icons.svg#discord-icon"></use>
-            </svg>
-            Discord
-          </a>
-        </li>
-        <li>
-          <a href="https://x.com/vite_js" target="_blank">
-            <svg class="button-icon" role="presentation" aria-hidden="true">
-              <use href="/icons.svg#x-icon"></use>
-            </svg>
-            X.com
-          </a>
-        </li>
-        <li>
-          <a href="https://bsky.app/profile/vite.dev" target="_blank">
-            <svg class="button-icon" role="presentation" aria-hidden="true">
-              <use href="/icons.svg#bluesky-icon"></use>
-            </svg>
-            Bluesky
-          </a>
-        </li>
-      </ul>
-    </div>
-  </section>
-
-  <div class="ticks"></div>
-  <section id="spacer"></section>
 </template>
+<style scoped lang="scss"></style>

src/layouts/authPage/authPageLayout.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex min-h-full">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script setup lang="ts">
+// flex min-h-full flex-1 overflow-x-hidden select-none
+</script>
+
+<style scoped lang="scss"></style>

src/layouts/authPage/index.ts

@@ -0,0 +1 @@
+export { default as AuthPageLayout } from "./authPageLayout.vue";

src/main.ts

@@ -4,6 +4,8 @@ import { router } from "@/router";
 import useNaiveUi from "@/assets/naiveUI/useNaiveUi.ts";
 import App from "./App.vue";
 
+/** 引入 Tailwind CSS（必须在 SCSS 之前，确保 Vite 插件能正确拦截处理） */
+import "@/assets/style/tailwind.css";
 import "@/assets/style/index.scss";
 
 const app = createApp(App);

src/router/routes/index.ts

@@ -1,5 +1,29 @@
-import HelloWorld from "@/components/HelloWorld.vue";
+import type { RouteRecordRaw } from "vue-router";
 
-const routes = [{ path: "/", component: HelloWorld }];
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "Root",
+    component: () => import("@/components/HelloWorld.vue"),
+    children: []
+  },
+  {
+    path: "/auth",
+    name: "Authentication",
+    component: () => import("@/layouts/authPage/authPageLayout.vue"),
+    children: [
+      {
+        path: "login",
+        name: "Login",
+        component: () => import("@/views/auth/login.vue")
+      },
+      {
+        path: "register",
+        name: "Register",
+        component: () => import("@/views/auth/register.vue")
+      }
+    ]
+  }
+];
 
 export default routes;

src/views/auth/login.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="h-2/5"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/auth/register.vue

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

vite.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url))