comprehensive_tools之添加菜单

安装 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-itemv-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><imgalt="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(),// UnoCSSUnoCSS(),// 自动导入 UI 库，页面直接使用AutoImport({resolvers: [ElementPlusResolver()],imports: ['vue', 'vue-router'], // 导入vue和vue-routerdts: '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 PlusVueUseComponentsResolver(), // 自动导入 VueUseVueUseDirectiveResolver(), // 自动导入 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>

效果