给我一份基于vue的精美的个人博客前端 模板

A：当然，以下是一份基于Vue的精美的个人博客前端模板，希望您喜欢！

<template>
  <div class="blog-app">
    <header>
      <nav>
        <ul>
          <li><a href="/">首页</a></li>
          <li v-for="category in categories" :key="category.id">
            <a :href="`/categories/${category.id}`">{{ category.name }}</a>
          </li>
        </ul>
        <router-link class="button" to="/login">登录</router-link>
      </nav>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>© 2021 - 个人博客</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '前端开发' },
        { id: 2, name: '后端开发' },
        { id: 3, name: '设计' },
        { id: 4, name: '生活' }
      ]
    }
  }
}
</script>

<style>
.header {
  background-color: #f7f7f7;
  padding: 10px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul li a {
  color: #333;
  text-decoration: none;
}

nav ul li a:hover {
  color: #777;
}

nav .button {
  margin: 0 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f7f7f7;
  color: #333;
  text-decoration: none;
  border: 1px solid #333;
  transition: all 0.3s ease;
}

nav .button:hover {
  background-color: #333;
  color: #fff;
}

main {
  padding: 20px;
}

ul.articles {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.articles li {
  margin-bottom: 20px;
}

ul.articles li a {
  color: #333;
  text-decoration: none;
}

ul.articles li a:hover {
  color: #777;
}

ul.articles li span.date {
  color: #666;
  font-size: 14px;
}

footer {
  background-color: #f7f7f7;
  padding: 10px;
  text-align: center;
  box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);
}
</style>

该模板包括了一个顶部导航栏、主要内容区域以及页脚。还包括了一些样式，例如标题、文章列表、按钮等等。您可以根据自己的需求自定义该模板，同时添加您自己的功能和样式。希望对您有所帮助！