吖昭的技术笔记《从零开发个人博客网站（前端篇）》
个人博客是展示思想与作品的重要载体，用 Vue3 + Vite 搭建前端不仅能享受 Vue3 的 Composition API 带来的逻辑复用优势，还能借助 Vite 的极速热更新提升开发效率。以下从项目初始化到功能上线，详解博客前端的搭建全过程，聚焦路由设计、组件封装等核心细节。
一、项目初始化与环境配置
1. 搭建基础框架
首先通过 Vite 快速创建 Vue3 项目，选择 TypeScript 支持以提升代码可维护性：
npm install
# 启动开发服务器（默认端口5173）
npm run dev
项目结构按功能模块划分，便于后期扩展：
/assets # 静态资源（图片、样式）
/components # 通用组件（导航栏、分页器等）
/views # 页面组件（首页、文章详情页等）
/router # 路由配置
/hooks # 自定义钩子（如请求封装）
/utils # 工具函数（如日期格式化）
/types # TypeScript 类型定义
App.vue # 根组件
main.ts # 入口文件
2. 安装核心依赖
根据博客功能需求，安装路由、状态管理、HTTP 请求等工具：
# 路由管理
npm install vue-router@4
# 状态管理（可选，小型博客可不用）
npm install pinia
# HTTP 请求
npm install axios
# UI组件库（按需选择，此处以Element Plus为例）
npm install element-plus
# 图标库
npm install -plus/icons-vue
二、路由设计与配置
博客前端通常包含「首页」「文章详情页」「分类页」「关于页」等页面，需通过 Vue Router 实现页面跳转与参数传递。
1. 路由配置文件（src/router/index.ts）
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import ArticleDetailView from '../views/ArticleDetailView.vue';
import CategoryView from '../views/CategoryView.vue';
import AboutView from '../views/AboutView.vue';
// 路由规则
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'home',
component: HomeView,
meta: { title: '首页 - 我的博客' } // 页面标题元信息
},
{
path: '/article/:id', // 动态路由参数：文章ID
name: 'articleDetail',
2. 在入口文件中注册路由（src/main.ts）
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(router); // 注册路由
app.use(ElementPlus); // 注册UI组件库
app.mount('#app');
3. 根组件中添加路由出口（src/App.vue）
<template>
<div id="app">
<!-- 导航栏组件（全局显示） -->
<Navbar />
<!-- 路由匹配的组件将在这里渲染 -->
<router-view class="main-content" />
<!-- 页脚组件（全局显示） -->
<Footer />
</div>
</template>
<style scoped>
.main-content {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
三、核心组件封装与复用
博客中存在大量可复用的 UI 元素（如导航栏、文章卡片、分页器），通过组件封装减少重复代码，提升维护效率。
1. 导航栏组件（src/components/Navbar.vue）
导航栏需包含 logo、导航链接、搜索框等元素，且在滚动时变化样式：
<template>
<header class="navbar" :class="{ 'navbar--scrolled': isScrolled }">
<div class="container">
<!-- Logo -->
<router-link to="/" class="logo">我的博客</router-link>
<!-- 导航链接 -->
<nav class="nav-links">
<router-link
to="/"
:class="{ 'active': $route.name === 'home' }"
exact
>
首页
</router-link>
<router-link
to="/category/前端"
2. 文章卡片组件（src/components/ArticleCard.vue）
用于首页和分类页展示文章摘要，接收文章数据作为 props：
<template>
<div class="article-card">
<!-- 文章封面图 -->
<div class="card-img" v-if="article.cover">
<img :src="article.cover" :alt="article.title" />
</div>
<!-- 文章信息 -->
<div class="card-content">
<div class="card-meta">
<span class="category">{{ article.category }}</span>
<span class="date">{{ article.createTime | formatDate }}</span>
</div>
<h3 class="card-title">
<router-link :to="`/article/${article.id}`">{{ article.title }}</router-link>
</h3>
3. 分页组件（src/components/Pagination.vue）
封装分页逻辑，支持页码切换、页码大小调整：
<template>
<div class="pagination">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 15]" // 可选每页条数
:total="total" // 总条数
layout="total, sizes, prev, pager, next, jumper" // 分页布局
@size-change="handleSizeChange" // 页码大小变化事件
@current-change="handleCurrentChange" // 页码变化事件
/>
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
四、页面实现与数据交互
1. 首页实现（src/views/HomeView.vue）
首页需展示文章列表、分类导航等内容，通过 axios 请求后端接口获取数据：
<template>
<div class="home">
<!-- 分类导航 -->
<div class="category-nav">
<el-tag
v-for="category in categories"
:key="category.id"
:closable="false"
:type="currentCategoryId === category.id ? 'primary' : 'default'"
@click="handleCategoryClick(category.id)"
>
{{ category.name }} ({{ category.count }})
</el-tag>
</div>
<!-- 文章列表 -->
你必须 登录 才能发表评论.