vue实现静态博客

使用 Vue 构建静态博客的方法

方案一：VuePress

VuePress 是一个基于 Vue 的静态站点生成器，专为技术文档优化，但也适合博客开发。

安装 VuePress：

npm install -g vuepress

创建项目结构：

mkdir blog && cd blog
echo '# Hello VuePress' > README.md

启动开发服务器：

vuepress dev

构建静态文件：

vuepress build

配置 docs/.vuepress/config.js 可自定义主题、导航栏等。支持 Markdown 扩展和 Frontmatter 元数据。

方案二：Nuxt.js

Nuxt.js 支持静态生成（SSG）模式，适合需要更多定制化的博客。

创建 Nuxt 项目：

npx create-nuxt-app blog

配置 nuxt.config.js 启用静态生成：

export default {
  target: 'static'
}

页面存放在 pages/ 目录，Markdown 可通过 @nuxt/content 模块解析：

npm install @nuxt/content

运行生成命令：

npm run generate

方案三：Vite + Vue 手动实现

适合需要完全控制的项目。

初始化 Vite 项目：

npm create vite@latest blog --template vue

添加 Markdown 处理插件：

npm install markdown-it vite-plugin-md

配置 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import md from 'vite-plugin-md'

export default defineConfig({
  plugins: [vue(), md()]
})

通过动态路由加载 Markdown 文件，构建后生成纯静态 HTML。

关键功能实现

Markdown 渲染

使用 marked 或 markdown-it 解析内容：

import { marked } from 'marked'
const html = marked('# Title')

路由处理

在 Vue Router 中配置动态路由：

const routes = [
  { path: '/post/:id', component: Post }
]

部署

生成的 dist/ 目录可直接部署到 GitHub Pages、Netlify 或 Vercel。

主题与样式建议

• 使用 Tailwind CSS 快速构建 UI
• 集成 Prism.js 实现代码高亮
• 通过 Frontmatter 管理文章元数据（如标题、日期）

示例 Frontmatter：

---
title: Vue 静态博客
date: 2023-01-01
---

以上方案均可实现高性能静态博客，按需选择复杂度与功能平衡的方案。