您可以使用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 ]
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
