vue3好看的导航栏和侧边栏

您可以使用Element Plus来实现Vue3中好看的导航栏和侧边栏。Element Plus是一套基于Vue 3的桌面端组件库，具有现代和美观的设计风格。以下是一个使用Element Plus实现导航栏和侧边栏的示例：

<template>
  <div id="app">
    <!-- 导航栏 -->
    <el-header>
      <el-menu mode="horizontal" theme="dark">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">产品</el-menu-item>
        <el-menu-item index="3">关于我们</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 侧边栏 -->
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1-1" router>
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-setting"></i>
              <span>设置</span>
            </template>
            <el-menu-item index="1-1">基本设置</el-menu-item>
            <el-menu-item index="1-2">高级设置</el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span>文档</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <!-- 主要内容 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ElHeader, ElMenu, ElMenuItem, ElSubMenu, ElAside, ElMain } from 'element-plus';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    ElHeader,
    ElMenu,
    ElMenuItem,
    ElSubMenu,
    ElAside,
    ElMain
  }
});
</script>

<style>
/* 样式可以根据自己的需求进行修改 */
</style>

在这个示例中，我们使用了Element Plus中的`el-header`、`el-menu`、`el-menu-item`、`el-submenu`、`el-aside`和`el-main`组件来实现导航栏和侧边栏的样式和功能。您可以根据自己的需求进一步修改和美化样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [【Vue】设置导航栏、侧边栏为公共页面](https://blog.csdn.net/Mr_EvanChen/article/details/80847724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3 + element plus实现侧边栏](https://blog.csdn.net/leftfist/article/details/127016585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]