当前位置：首页 > VUE

vue实现静态博客

2026-02-09 11:15:07VUE

Vue 实现静态博客的方法

使用 Vue 实现静态博客可以通过多种方式完成，以下是几种常见的方法：

使用 VuePress

VuePress 是一个基于 Vue 的静态网站生成器，非常适合构建博客或文档网站。它内置了 Markdown 支持，并且可以轻松扩展功能。

安装 VuePress：

npm install -g vuepress

创建项目结构：

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

启动开发服务器：

vuepress dev

构建静态文件：

vuepress build

VuePress 默认会将 Markdown 文件转换为 HTML，并支持自定义主题和插件。

使用 Nuxt.js

Nuxt.js 是一个基于 Vue 的框架，支持静态生成（SSG）模式，适合构建博客或其他静态网站。

创建 Nuxt 项目：

npx create-nuxt-app blog

选择静态生成模式（SSG）：

vue实现静态博客

cd blog
npm run generate

Nuxt 会自动将页面预渲染为静态 HTML 文件，适合博客内容。

自定义 Vue 项目

如果希望完全自定义博客，可以从头开始构建 Vue 项目：

初始化 Vue 项目：

npm init vue@latest blog
cd blog
npm install

添加路由支持：

npm install vue-router

创建博客文章组件：

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  props: ['post']
}
</script>

使用 Vue 的构建命令生成静态文件：

vue实现静态博客

npm run build

使用 Vite 构建

Vite 是新一代前端构建工具，可以快速构建 Vue 静态博客：

创建 Vite + Vue 项目：

npm create vite@latest blog --template vue
cd blog
npm install

添加 Markdown 支持：

npm install markdown-it

创建 Markdown 渲染组件：

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script>
import markdownIt from 'markdown-it'
export default {
  props: ['content'],
  computed: {
    compiledMarkdown() {
      return markdownIt().render(this.content)
    }
  }
}
</script>

构建静态文件：