新手如何从零开始搭建自己的博客系统： 后台管理-新增文章列表

项目搭建完成后，是时候新建第一个页面了，为了尽可能的简单，我们按最小化原则新建对应的页面，后续的页面都可以在这个基础上完成。

博客最基础的页面就是文章列表跟文章详情页面，只要有这两个页面就可以实现一个迷你博客了。

在src/views目录下新建postList.vue文件作为文章列表页面，同目录下新建postDetail.vue作为文章详情。

src/views/postList.vue:

<template>
  <div class="page-list">
    <div v-for="(item, index) in state.list" :key="index">
      <div>{{ item.title }}</div>
      <div>{{ item.content }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed } from "vue";
const state = reactive({
  list: [
    {
      title: "这是第一篇文章",
      content: "这是www.dsiab.com网站上的第一篇文章内容"
    },
    {
      title: "这是第二篇文章",
      content: "这是www.dsiab.com网站上的第二篇文章内容"
    }
  ],
});

</script>

文章列表新建完成后，下一步需要在src/router/index.ts文件中给文件列表页面添加一个路由，这个路由也就是可以通过浏览器访问的地址：

src/router/index.ts：

import {
  createRouter,
  createWebHashHistory,
} from "vue-router";

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/postList",
      component: () => import("@/views/postList.vue"),
    }
  ],
});

export default router;

在浏览器地址栏输入一下地址，不出意外的话应该能看到如下页面：

http://127.0.0.1:7910/#/postList

此时一个最简单的文章列表已经制作完成了，当然这个数据是写死的，但是请相信这是一个很好的开始。

本文章由javascript技术分享原创和收集