帮我写一段vue侧边栏的模板页面

好的，以下是一个简单的 Vue 侧边栏模板页面：

<template>
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <li class="nav-item" v-for="(item, index) in menuItems" :key="index">
          <router-link :to="item.link" class="nav-link" :class="{ active: item.active }">
            <i class="nav-icon" :class="item.icon"></i> {{ item.text }}
          </router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      menuItems: [
        {
          text: '首页',
          link: '/',
          icon: 'fas fa-home'
        },
        {
          text: '文章',
          link: '/articles',
          icon: 'far fa-file-alt'
        },
        {
          text: '关于',
          link: '/about',
          icon: 'fas fa-info-circle'
        }
      ]
    }
  }
}
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background-color: #343a40;
  color: #fff;
}

.nav-item {
  margin: 10px 0;
}

.nav-link {
  display: block;
  padding: 10px;
  color: #fff;
}

.nav-link:hover {
  background-color: #495057;
}

.nav-link.active {
  background-color: #495057;
}

.nav-icon {
  margin-right: 10px;
}
</style>

该组件使用 Bootstrap 4 的样式，并使用 Vue Router 来处理路由链接。你可以根据需要自定义菜单项和样式。