我如何用Vue 3打造一个现代化个人博客系统（性能提升52%）

晴天丨
0 阅读5分钟

从0到1构建一个高性能的现代化博客系统，分享我的技术选型、开发经验与优化成果

前言

作为一个前端开发者，拥有一个个人博客不仅能展示自己的技术能力，还能沉淀知识、积累影响力。今天我把自己开发的博客系统开源出来，分享我的技术选型、开发过程和优化经验。

项目介绍

为什么开发这个博客？

市面上有很多优秀的博客平台，如Hexo、Hugo、Jekyll等静态生成器，也有WordPress、Typecho这样的动态博客系统。但我仍然选择自己开发，原因如下：

  1. 技术栈自由：可以使用最新的前端技术栈
  2. 完全掌控：每个功能都可以按需定制
  3. 学习价值：开发过程本身就是最好的学习
  4. 可扩展性：后续可以添加更多个性化功能

核心功能

博客系统包含以下核心功能：

  • 📝 文章管理：Markdown编辑器、草稿自动保存、文章系列管理
  • 🎨 现代化UI：响应式设计、深色模式、动画效果
  • 🔍 搜索功能：文章搜索、标签分类、归档浏览
  • 🤖 AI功能：智能摘要生成、评论情感分析、垃圾评论检测
  • 📊 智能推荐：个性化推荐、相关文章推荐、热门文章
  • 🎮 游戏化：签到系统、能量值、成就系统
  • 🔔 通知系统：评论通知、点赞通知、系统通知
  • 🎵 音乐播放器：背景音乐、歌词同步

技术栈选择

前端框架：Vue 3

选择Vue 3的原因：

  1. Composition API：更灵活的代码组织方式
  2. 性能提升：虚拟DOM优化、Tree-shaking
  3. TypeScript支持：原生支持TS，类型更安全
  4. 生态完善：丰富的插件和工具链
import { ref, reactive, computed, onMounted } from 'vue'

export function useArticle() {
  const articles = ref([])
  const loading = ref(false)

  const fetchArticles = async () => {
    loading.value = true
    // 获取文章列表
    articles.value = await getArticles()
    loading.value = false
  }

  const hotArticles = computed(() => {
    return articles.value.filter(a => a.views > 1000)
  })

  onMounted(() => {
    fetchArticles()
  })

  return {
    articles,
    loading,
    hotArticles
  }
}

构建工具：Vite

Vite的优势：

  1. 极速启动：利用ESM，开发服务器秒启动
  2. 热更新快：基于ESM的HMR，更新速度极快
  3. 生产优化：Rollup打包，代码分割
  4. 插件丰富：支持Vue、TS、CSS等
// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router'],
          'element-plus': ['element-plus'],
          'utils': ['@/utils/format', '@/utils/seo']
        }
      }
    }
  }
})

UI组件库：Element Plus

选择Element Plus的原因：

  1. 设计优秀：现代化UI设计，符合审美
  2. 组件丰富：覆盖大部分业务场景
  3. TypeScript支持：完善的类型定义
  4. 主题定制：支持自定义主题

语言：TypeScript

使用TypeScript的好处：

  1. 类型安全：减少运行时错误
  2. 代码提示：更好的IDE支持
  3. 可维护性：大型项目更容易维护
  4. 开发效率：减少调试时间
// 文章类型定义
interface Article {
  id: number
  title: string
  summary: string
  content: string
  date: string
  category: string
  tags: string[]
  views: number
  likes: number
  collects: number
  author: string
  isTop?: boolean
}

// 评论类型定义
interface Comment {
  id: number
  articleId: number
  author: string
  content: string
  date: string
  avatar: string
  parentId?: number
}

性能优化成果

经过一系列优化，博客性能得到了显著提升：

指标优化前优化后提升
首屏加载~2.5s~1.2s⬇️ 52%
初始包大小~850KB~520KB⬇️ 39%
冷启动时间~3.5s~1.8s⬇️ 49%

优化措施

1. 代码分割

按功能模块拆分vendor chunks，减少首屏加载体积：

manualChunks: {
  'vue-vendor': ['vue', 'vue-router'],
  'element-plus': ['element-plus'],
  'utils': ['@/utils/format', '@/utils/seo']
}

2. 懒加载图标

使用requestIdleCallback分批注册图标：

function lazyRegisterIcons() {
  const idleCallback = window.requestIdleCallback || window.setTimeout
  idleCallback(() => {
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
  })
}

3. 依赖预构建

优化Vite的预构建配置：

optimizeDeps: {
  include: [
    'vue',
    'vue-router',
    'element-plus',
    'marked',
    'highlight.js'
  ]
}

4. 生产压缩

使用Terser压缩代码，移除console：

minify: 'terser',
terserOptions: {
  compress: {
    drop_console: true,
    drop_debugger: true
  }
}

项目结构

src/
├── assets/          # 静态资源
├── components/      # 公共组件
│   ├── layout/      # 布局组件
│   ├── article/     # 文章组件
│   ├── editor/      # 编辑器组件
│   └── index.ts     # 组件导出
├── composables/     # 组合式函数
│   ├── useTheme.ts
│   ├── useLocalStorage.ts
│   └── useAutoSave.ts
├── data/            # 数据文件
│   ├── articles.ts
│   ├── series.ts
│   └── notifications.ts
├── router/          # 路由配置
├── styles/          # 全局样式
├── utils/           # 工具函数
│   ├── format.ts
│   └── seo.ts
├── views/           # 页面组件
└── App.vue          # 根组件

核心功能展示

1. 增强的Markdown编辑器

支持：

  • ✅ 丰富的工具栏
  • ✅ 实时预览
  • ✅ 图片拖拽上传
  • ✅ 快捷键支持
  • ✅ 自动保存
<template>
  <EnhancedMarkdownEditor
    v-model="content"
    :auto-save="true"
    :show-preview="true"
  />
</template>

2. 草稿自动保存

const { autoSaving, lastSaved, manualSave } = useAutoSave(formData)

// 5秒无操作自动保存
// 显示保存状态
// 支持手动保存

3. 智能推荐系统

// 个性化推荐
const personalized = getPersonalizedRecommendations(5)

// 相似文章
const similar = getSimilarArticles(articleId, 3)

// 热门文章
const popular = getPopularArticles(5)

4. AI功能集成

// 文章摘要生成
const summary = await generateArticleSummary(content)

// 评论情感分析
const sentiment = await analyzeCommentSentiment(comment)

// 垃圾评论检测
const spam = await detectSpamComment(comment)

部署方案

支持多平台部署：

1. Vercel部署

# 安装Vercel CLI
npm i -g vercel

# 部署
vercel --prod

2. Cloudflare Pages

# 使用Wrangler
npm i -g wrangler

# 部署
wrangler pages publish dist

3. 腾讯云EdgeOne

# 使用edgeone-pages CLI
npm i -g edgeone-pages

# 部署
edgeone-pages deploy

SEO优化

为了提升搜索引擎排名，做了以下优化：

// 动态设置页面Meta
import { setPageMeta } from '@/utils/seo'

setPageMeta({
  title: 'Vue 3 博客系统',
  description: '一个现代化的个人博客系统',
  keywords: ['Vue 3', 'TypeScript', '博客'],
  ogImage: '/og-image.png'
})

开源地址

后续计划

短期（1-2周）

  • 添加文章目录功能
  • 实现图片懒加载
  • 集成评论系统
  • 添加PWA支持

中期（1-2月）

  • 后端API集成
  • 用户系统
  • 数据统计
  • RSS订阅

长期（3-6月）

  • 多语言支持
  • 搜索优化
  • CDN加速
  • 移动端优化

总结

通过这个博客项目，我学到了很多：

  1. 技术选型：根据项目需求选择合适的技术栈
  2. 性能优化：从多个维度进行性能优化
  3. 代码质量：使用TypeScript提升代码质量
  4. 组件化设计：合理的组件拆分提升可维护性
  5. 用户体验：从用户角度设计功能

希望这个项目能帮助到正在学习Vue 3的前端开发者，也欢迎大家提出宝贵的建议和意见！

关注我的掘金账号，获取更多前端干货！

👉 GitHub开源地址 👉 在线演示

标签：#Vue3 #TypeScript #前端 #博客系统 #性能优化

点赞❤️ + 收藏⭐️ + 评论💬，你的支持是我创作的动力！

avatar
文章
阅读
粉丝