当前位置：首页 > news >正文

基于Vue3开发：打造高性能个人博客与在线投票平台

news 2025/5/6 8:34:36

以下是一篇基于 Vue 3 完整的技术教程，教你如何从 0 到 1 构建一个高性能的个人博客＋在线投票平台，涵盖需求分析、技术选型、架构设计、前端实现、性能优化、部署运维等方面。

项目背景与目标
功能需求分析
技术选型
整体架构设计
前端实现（Vue 3 + Vite）
- 5.1 创建项目脚手架
- 5.2 路由与布局设计
- 5.3 文章模块
- 5.4 投票模块
- 5.5 状态管理与接口封装
性能优化策略
- 6.1 路由懒加载与代码分割
- 6.2 虚拟列表渲染
- 6.3 静态资源压缩与 CDN 分发
- 6.4 PWA 与离线缓存
后端对接示例
部署与运维
总结与展望

项目背景与目标

随着个人品牌建设和社区互动需求的增长，越来越多开发者希望拥有一套既能发布技术文章，又能与用户进行实时互动（如投票、点赞、评论）的高性能平台。本项目目标是：

模块化：清晰分离博客发布与投票功能
高性能：在内容量大、并发高时依旧流畅
良好体验：支持 PC 与移动端自适应

功能需求分析

模块	功能点
博客模块	发布/编辑/删除文章、Markdown 渲染、文章归档、分页、搜索
投票模块	创建投票、选项管理、多选/单选模式、截止时间控制、实时结果展示
通用模块	用户注册登录（JWT）、权限校验、评论与点赞、文件上传
性能运维	SSR 或预渲染、静态资源 CDN、离线缓存、监控预警

技术选型

前端：Vue 3 + Composition API + TypeScript + Vite
UI：Naive UI 或 Ant Design Vue
状态管理：Pinia
路由：Vue Router 4
打包工具：Vite（原生 ESM + 极速冷启动）
后端（示例）：Node.js + Express + MongoDB
CI/CD：GitHub Actions + Docker + Nginx

整体架构设计

┌────────────┐       ┌──────────────┐      ┌───────────┐
│   Browser  │ ←→   │  Nginx (SSR) │ ←→  │  Node/Express  │
└────────────┘       └──────────────┘      └───────────┘│                     │                    │▼                     ▼                    ▼Frontend(Vue3)          Static Assets       REST API / GraphQL

静态资源由 Nginx + CDN 分发
首屏 SSR 或预渲染（prerender）提升 SEO 与首屏速度
客户端路由切换 & 缓存策略

前端实现（Vue 3 + Vite）

5.1 创建项目脚手架

npm init vite@latest vue-blog-vote -- --template vue-ts
cd vue-blog-vote
npm install

在 vite.config.ts 中配置别名与 CDN 前缀：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],resolve: {alias: { '@': '/src' }},base: process.env.NODE_ENV === 'production' ? 'https://cdn.example.com/' : '/'
});

5.2 路由与布局设计

使用 Vue Router 4，定义公共布局与私有布局：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import PublicLayout from '@/layouts/PublicLayout.vue';
import AdminLayout from '@/layouts/AdminLayout.vue';const routes = [{ path: '/', component: PublicLayout, children: [{ path: '', name: 'Home', component: () => import('@/views/Home.vue') },{ path: 'article/:id', name: 'Article', component: () => import('@/views/Article.vue') },{ path: 'vote/:id', name: 'Vote', component: () => import('@/views/Vote.vue') },]},{ path: '/admin', component: AdminLayout, children: [{ path: 'login', component: () => import('@/views/admin/Login.vue') },{ path: 'dashboard', component: () => import('@/views/admin/Dashboard.vue') },]}
];export const router = createRouter({history: createWebHistory(),routes
});

5.3 文章模块

Markdown 渲染：使用 markdown-it
分页与搜索：后端分页，前端展示组件

<!-- src/views/Home.vue -->
<template><n-card title="文章列表"><n-list><n-list-item v-for="post in posts" :key="post.id"><router-link :to="{ name: 'Article', params: { id: post.id } }">{{ post.title }}</router-link></n-list-item></n-list><n-pagination:page="page":page-count="totalPages"@update:page="fetchPosts"
/></n-card>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useApi } from '@/composables/useApi';const page = ref(1), totalPages = ref(1), posts = ref([]);
const { get } = useApi();async function fetchPosts() {const res = await get('/api/posts', { page: page.value });posts.value = res.data.items;totalPages.value = res.data.totalPages;
}onMounted(fetchPosts);
</script>

5.4 投票模块

支持单选 & 多选
倒计时与结果实时轮询

<!-- src/views/Vote.vue -->
<template><n-card :title="vote.title"><n-radio-group v-model="selected" :options="vote.options" :disabled="expired" /><n-button @click="submit" :disabled="expired">提交投票</n-button><div v-if="expired || hasVoted"><n-progress v-for="opt in vote.options" :key="opt.value":label="`${opt.label} (${opt.count}票)`":percentage="(opt.count/total*100).toFixed(1)" /></div></n-card>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useApi } from '@/composables/useApi';interface Vote {id: string;title: string;options: { label: string; value: string; count: number }[];deadline: string;
}const api = useApi();
const vote = ref<Vote>({ id:'', title:'', options:[], deadline:'' });
const selected = ref<string[]>([]);
const hasVoted = ref(false);async function fetchVote() {const res = await api.get(`/api/votes/${route.params.id}`);vote.value = res.data;
}
async function submit() {await api.post(`/api/votes/${vote.value.id}/submit`, { choices: selected.value });hasVoted.value = true;await fetchVote();  // 更新结果
}onMounted(fetchVote);
</script>

5.5 状态管理与接口封装

使用 Pinia + Axios 封装全局 API：

// src/composables/useApi.ts
import axios from 'axios';
export function useApi() {const instance = axios.create({ baseURL: import.meta.env.VITE_API_BASE });instance.interceptors.request.use(cfg => {const token = localStorage.getItem('token');if (token) cfg.headers.Authorization = `Bearer ${token}`;return cfg;});return {get: <T>(url: string, params?: any) => instance.get<T>(url, { params }),post: <T>(url: string, data?: any) => instance.post<T>(url, data),// … put, delete};
}

性能优化策略

6.1 路由懒加载与代码分割

// 动态 import 已自动分包，Vite 默认在生产环境生成多个 chunk
component: () => import('@/views/About.vue');

6.2 虚拟列表渲染

文章列表或长投票选项可用 vue-virtual-scroll-list 减少 DOM 数量。

6.3 静态资源压缩与 CDN 分发

在构建阶段开启 gzip、brotli
将图片/字体等大文件上传到 CDN

6.4 PWA 与离线缓存

借助 Vite PWA 插件提供离线浏览与资源缓存。

后端对接示例

以 Node.js + Express + MongoDB 为例，简单说明用户注册、文章列表、投票提交接口。

// routes/posts.js
router.get('/', async (req, res) => {const { page=1 } = req.query;const items = await Post.find().sort({ createdAt: -1 }).skip((page-1)*10).limit(10);const total = await Post.countDocuments();res.json({ items, totalPages: Math.ceil(total/10) });
});