Vue前端项目-主页布局-左侧导航菜单（静态）

最新推荐文章于 2026-05-15 12:21:35 发布

原创

最新推荐文章于 2026-05-15 12:21:35 发布 · 2.3w 阅读

标签

#左侧菜单导航

收录于

本文介绍如何在Vue前端项目中创建静态主页布局的左侧导航菜单，包括修改侧边栏组件以添加导航菜单，定制滚动条样式，以及在src/assets/styles/sidebar.scss中导入并应用组件。

1、修改侧边栏组件

2、滚动条样式

3、导入并使用组件

实现效果：

NavMenu 的详细用法：

https://element.eleme.cn/#/zh-CN/component/menu

1、修改侧边栏组件

为侧边栏组件，添加导航菜单

侧边栏组件： src / layout / components / Sidebar / index.vue

<template>
  <div class="">
    <el-scrollbar class="scrollbar-wrapper">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el