项目搭建完成后，是时候新建第一个页面了，为了尽可能的简单，我们按最小化原则新建对应的页面，后续的页面都可以在这个基础上完成。
博客最基础的页面就是文章列表跟文章详情页面，只要有这两个页面就可以实现一个迷你博客了。
在src/views目录下新建postList.vue文件作为文章列表页面，同目录下新建postDetail.vue作为文章详情。
src/views/postList.vue:
<template>\n <div class="page-list">\n <div v-for="(item, index) in state.list" :key="index">\n <div>{{ item.title }}</div>\n <div>{{ item.content }}</div>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\nimport { reactive, onMounted, computed } from "vue";\nconst state = reactive({\n list: [\n {\n title: "这是第一篇文章",\n content: "这是www.dsiab.com网站上的第一篇文章内容"\n },\n {\n title: "这是第二篇文章",\n content: "这是www.dsiab.com网站上的第二篇文章内容"\n }\n ],\n});\n\n</script>\n文章列表新建完成后，下一步需要在src/router/index.ts文件中给文件列表页面添加一个路由，这个路由也就是可以通过浏览器访问的地址：
src/router/index.ts：
import {\n createRouter,\n createWebHashHistory,\n} from "vue-router";\n\nconst router = createRouter({\n history: createWebHashHistory(import.meta.env.BASE_URL),\n routes: [\n {\n path: "/postList",\n component: () => import("@/views/postList.vue"),\n }\n ],\n});\n\nexport default router;\n在浏览器地址栏输入一下地址，不出意外的话应该能看到如下页面：
http://127.0.0.1:7910/#/postList此时一个最简单的文章列表已经制作完成了，当然这个数据是写死的，但是请相信这是一个很好的开始。