Auto Commit

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+<template>
+  <router-view />
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
 </style>

src/assets/base.css

@@ -61,6 +61,7 @@
 
 body {
   min-height: 100vh;
+  padding: 0;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

src/assets/main.css

 @import "./base.css";
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
 }
\ No newline at end of file
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/TextPenetration.vue

+<script setup>
+
+</script>
+
+<template>
+  <div class="textPenetration">
+      <div class="modal">
+        <h1>ABCDEFGHIJKLMN</h1>
+      </div>
+  </div>
+</template>
+
+<style scoped>
+.textPenetration{
+  --bg: url('../assets/girl.jpg') no-repeat center;
+  width: 100%;
+  height: 100vh;
+  background: var(--bg);
+  background-size: cover;
+}
+.modal{
+  background: rgba(0, 0, 0, .7);
+  width: 100%;
+  height: 100%;
+}
+.modal h1{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10vw;
+  -webkit-text-stroke: 1px #fff;
+  background: var(--bg);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+</style>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
+import router from './router'
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/router/index.ts

+import { createWebHistory, createRouter } from 'vue-router'
+import TextPenetration from '../components/TextPenetration.vue'  // 文字穿透效果
+
+export const constantRoutes = [
+    {
+      path: '/login',
+      component: () => TextPenetration,
+      hidden: true
+    },
+]
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: constantRoutes,
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition
+      } else {
+        return { top: 0 }
+      }
+    },
+  });
+  
+  export default router;
\ No newline at end of file

vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  return: {
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        '~': path.resolve('./'),
+        // 设置别名
+        '@': path.resolve('./src')
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    }
+  }
 })