安装 sass sass-loader

npm install -D sass sass-loader

新建Layout、styles

在src目录下新建Layout文件夹，在该文件夹下新建 index.vue
内容：

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

// 获取当前路由和导航
const router = useRouter()
const route = useRoute()

// 获取当前激活的路由
const activeRoute = route.path

// 动态过滤路由，只显示带有 `meta.title` 的路由
const filteredRoutes = router.options.routes.filter(r => r.meta?.title)

// 导航到目标路由
const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<template>
  <div class="layout-container">
    <!-- 头部区域 -->
    <el-header height="50px" class="layout-header">
      <!-- 减小头部高度 -->
      <div class="header-content">
        <div class="logo">My App</div>
        <!-- 动态生成菜单项 -->
        <el-menu mode="horizontal" :default-active="activeRoute" class="menu">
          <el-menu-item
            v-for="route in filteredRoutes"
            :key="route.path"
            :index="route.path"
            @click="navigateTo(route.path)"
          >
            {{ route.meta?.title || route.name }}
          </el-menu-item>
        </el-menu>
      </div>
    </el-header>

    <!-- 内容区域 -->
    <el-main class="layout-content">
      <slot />
    </el-main>

    <!-- 页脚区域 -->
    <el-footer height="20px" class="layout-footer">
      © 2024 My App. All rights reserved.
    </el-footer>
  </div>
</template>

<style scoped lang="scss">
.layout-container {
  height: calc(100vh - 8px);
  display: flex;
  flex-direction: column;

  .layout-header {
    background-color: #ffffff;
    color: white;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    line-height: 50px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;

      .logo {
        font-size: 18px;
        font-weight: 600;
        padding-left: 10px;
        color: aquamarine;
        margin-right: 10px;
      }

      .menu {
        flex-grow: 1;
        display: flex;
        justify-content: center; /* 水平居中对齐菜单 */
        font-size: 14px;
        height: 50px;
        border-bottom: none;

        .el-menu-item {
          padding: 0 15px;
        }
      }
    }
  }

  .layout-content {
    flex-grow: 1;
    padding: 20px;
  }

  .layout-footer {
    text-align: center;
    background-color: #f0f0f0;
    color: #909399;
  }
}
</style>

修改配置文件

App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.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!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@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;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

修改 main.css

@import './base.css';

#app {
  /* max-width: 1280px; */
  width: 100vw;
  margin: 0 auto;
  /* padding: 2rem; */
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@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;
  }
}

main.ts

移动 main.css、base.css 至styles文件夹中

import './styles/main.css' // 引入全局样式文件，应用全局样式

import { createApp } from 'vue' // 从 Vue 中引入 createApp 函数，用于创建 Vue 应用实例
import { createPinia } from 'pinia' // 引入 Pinia，Pinia 是 Vue 3 的状态管理库
import ElementPlus from 'element-plus' // 引入 Element Plus 组件库
import 'element-plus/dist/index.css' // 引入 Element Plus 的全局样式文件
import App from './App.vue' // 引入根组件 App.vue，作为应用的根组件
import router from './router' // 引入 Vue Router 配置文件，管理应用的路由
import 'uno.css' // 引入 UnoCSS，一个 CSS 框架，用于快速开发 Vue 应用

// 创建 Vue 应用实例，将根组件 App 作为入口
const app = createApp(App)

// 使用 Element Plus 组件库
app.use(ElementPlus)

// 使用 Pinia 状态管理库
app.use(createPinia())

// 使用 Vue Router 进行路由管理
app.use(router)

// 将 Vue 应用挂载到 HTML 文件中的 id 为 `#app` 的 DOM 元素上
app.mount('#app')

删除components目录下的所有文件

在router文件夹中新建routers.ts

import { type RouteRecordRaw } from 'vue-router'
import HomeView from '@/views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { title: 'Home' }, // 添加 meta 信息
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue'),
    meta: { title: 'About' }, // 添加 meta 信息
  },
  {
    path: '/contact',
    name: 'contact',
    component: () => import('@/views/ContactView.vue'),
    meta: { title: 'Contact' }, // 添加 meta 信息
  },
]

export default routes

修改router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes' // 导入 routes

// 创建 Vue Router 实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 基于 HTML5 history 模式
  routes, // 使用从 routes.ts 导入的路由配置
})

export default router

修改vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// 自动配置
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// Element Plus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// UnoCSS
import UnoCSS from 'unocss/vite'
// VueUse
import {
  VueUseComponentsResolver,
  VueUseDirectiveResolver,
} from 'unplugin-vue-components/resolvers'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    // UnoCSS
    UnoCSS(),
    // 自动导入 UI 库，页面直接使用
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router'], // 导入vue和vue-router
      dts: 'types/auto-imports.d.ts', // 生成自动导入类型声明文件
      dirs: [], // 自动导入的方法等
      vueTemplate: true,
    }),
    // 自动注册组件，页面直接使用
    Components({
      dirs: ['src/components/', 'src/Layout'], // 扫描的文件夹
      dts: 'types/components.d.ts', // 生成自动注册类型声明文件
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/], // 匹配文件
      resolvers: [
        ElementPlusResolver(), // 自动导入 Element Plus
        VueUseComponentsResolver(), // 自动导入 VueUse
        VueUseDirectiveResolver(), // 自动导入 VueUse 的指令
      ], // 配置组件库的解析器
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

AboutView.vue、ContactView.vue、HomeView.vue

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>

ContactView.vue

<template>
  <div class="about">
    <h1>This is an about contact</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

HomeView.vue

<script setup lang="ts"></script>

<template>
  <main>阿斯顿萨</main>
</template>

效果