vue期末作业设计网页

以下是一个基于Vue的静态博客网页设计的示例：

<template>
  <div class="blog">
    <header>
      <h1>My Blog</h1>
    </header>
    <nav>
      <ul>
        <li v-for="post in posts" :key="post.id">
          <a :href="post.url">{{ post.title }}</a>
        </li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>© 2022 My Blog. All rights reserved.</p>
    </footer>
  </div>
</template>

<script>
import { posts } from './data/posts';

export default {
  data() {
    return {
      posts: [],
    };
  },
  mounted() {
    this.posts = posts;
  },
};
</script>

<style>
/* 样式代码省略 */
</style>

这个示例中，我们使用Vue框架来构建一个静态博客网页。网页包括一个顶部的标题栏、导航栏、主要内容区域和底部的版权信息。导航栏通过`v-for`指令循环渲染博客文章列表，并使用Vue Router来实现路由功能。数据来源可以通过导入外部数据文件，如上述示例中的`data/posts.js`文件中的`posts`数组。