在 Vue 3 中创建侧边导航栏可以通过以下步骤实现：

1. 项目初始化

首先，确保你已经创建了一个 Vue 3 项目。如果还没有，可以使用 Vue CLI 或 Vite 创建一个新的项目。

2. 安装 Element Plus

如果你想使用 Element Plus 作为 UI 组件库，可以通过以下命令安装： 

npm install element-plus

3. 创建侧边导航栏组件

在 src/components 目录中创建一个名为 Sidebar.vue 的文件，并添加以下代码：

<template>
  <el-aside>
    <el-menu>
      <el-menu-item v-for="item in items" :key="item.name">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import { ElAside, ElMenu, ElMenuItem } from 'element-plus';

export default {
  name: 'Sidebar',
  components: {
    ElAside,
    ElMenu,
    ElMenuItem
  },
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

4. 注册侧边导航栏组件

在 main.js 文件中，注册侧边导航栏组件：

import { createApp } from 'vue';
import App from './App.vue';
import Sidebar from './components/Sidebar.vue';

const app = createApp(App);
app.component('Sidebar', Sidebar);
app.mount('#app');

5. 使用侧边导航栏组件

在需要显示侧边导航栏的地方，添加以下代码：

<template>
  <div id="app">
    <Sidebar :items="items" />
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        // 添加更多菜单项
      ]
    };
  }
}
</script>

6. 添加样式

你可以通过 CSS 自定义侧边导航栏的样式。例如：

.el-aside {
  background-color: #f4f4f4;
}
.el-menu-item {
  padding: 10px 20px;
}

7. 完整示例

结合以上步骤，你可以创建一个完整的侧边导航栏，用户可以通过点击导航项在不同页面之间切换。

通过这些步骤，你可以轻松实现一个功能齐全的侧边导航栏，提升用户体验。