给我一个vue element的侧边栏代码示例 单个导航

好的，这是一个使用Vue.js和Element UI组件库的侧边栏代码示例，包含一个单个导航元素：

<template>
  <div class="app-container">
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
          <el-menu-item index="1">导航1</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <p>这里是主要内容区域。</p>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '1'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
    }
  }
}
</script>

<style>
.app-container {
  height: 100%;
  width: 100%;
  display: flex;
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
}
</style>

在这个示例中，我们使用了Element UI组件库的`el-aside`和`el-menu`组件来实现侧边栏和导航。我们定义了一个名为`activeMenu`的数据属性，来跟踪活动的导航菜单项。在`el-menu`组件中，我们设置了默认活动菜单项为1，并使用`@select`事件监听器来更新`activeMenu`属性。在主要内容区域中，我们简单的添加了一个段落作为示例。

最后，我们使用CSS来设置`.app-container`元素的高度和宽度为100%，并使用`display:flex`属性使其成为一个弹性容器。我们还定义了一个`.el-menu-vertical-demo`类来设置`el-menu`组件的高度为100%并去掉其右边框，使其更符合传统的侧边栏外观。