Vue3 博客项目

做完任务系统，再来做一个"博客项目"：首页展示文章列表、支持标签筛选与关键字搜索、点击进入详情页、可把喜欢的文章加入收藏。相比任务系统，它更侧重"内容展示 + 多页面交互"，会让你把组件、路由、生命周期、watch、Pinia 综合用一遍。

项目功能预览

• 首页：文章卡片列表（标题、摘要、标签、日期）；
• 详情页：展示文章完整正文；
• 标签筛选：点击标签只看相关文章；
• 搜索框：输入关键字实时过滤标题；
• 收藏功能：把文章加入收藏并在独立页面查看。

文章的数据结构

先准备一份本地模拟数据 src/data/posts.js，每个对象对应一篇文章：

// src/data/posts.js
export const posts = [
  {
    id: 1,
    title: 'Vue3 组合式 API 入门',
    summary: '一张图看懂 setup 与 ref',
    content: '<p>完整正文……</p>',
    tags: ['Vue3'],
    date: '2024-06-01'
  },
  {
    id: 2,
    title: 'Pinia 状态管理实战',
    summary: '全局状态就该这样管',
    content: '<p>完整正文……</p>',
    tags: ['Vue3', 'Pinia'],
    date: '2024-06-10'
  }
]

页面与路由规划

路由	页面	说明
/	HomeView	文章列表 + 搜索 + 标签栏
/post/:id	PostView	文章详情
/favorites	FavoritesView	收藏列表

:id 是动态路由参数，详情页通过 route.params.id 找到对应文章。

各章节要练的知识点

• 模板语法渲染：插值、v-for、v-bind 渲染文章列表；
• 拆分组件：PostCard、TagList、SearchBar 等小组件；
• 路由跳转：列表 → 详情 → 收藏的页面导航；
• 生命周期与数据请求：模拟异步获取文章；
• watch 与搜索：监听关键字即时过滤；
• Composable：把"取文章"逻辑抽成 usePosts；
• Pinia 收藏：跨页面共享收藏状态。

先搭出首页雏形

只需十几行就能把文章列表渲染出来：

<!-- views/HomeView.vue -->
<script setup>
import { posts } from '../data/posts'
</script>

<template>
  <h1>我的博客</h1>
  <ul>
    <li v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.summary }}</p>
    </li>
  </ul>
</template>

效果：打开首页即看到全部文章的标题与摘要，为后续加入详情跳转、搜索筛选打下基础。

小结

博客项目把内容型站点常见的交互都包含了。从下一节开始，逐步把它实现出来。