当前位置：首页 > VUE

vue实现静态博客

2026-01-11 22:30:41VUE

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 文件转换为静态页面，支持自定义主题和插件。

使用 Nuxt.js

Nuxt.js 是一个基于 Vue 的框架，支持静态站点生成（SSG）模式。

创建 Nuxt 项目：

npx create-nuxt-app blog

在 nuxt.config.js 中配置静态生成：

vue实现静态博客

export default {
  target: 'static'
}

创建博客页面：

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

<script>
export default {
  async asyncData({ params }) {
    const post = await fetchPost(params.slug)
    return { post }
  }
}
</script>

生成静态文件：

npm run generate

使用 Vue 和 Markdown

直接使用 Vue 和 Markdown 解析器（如 marked 或 markdown-it）构建博客。

安装依赖：

npm install vue marked

解析 Markdown：

vue实现静态博客

import marked from 'marked'

export default {
  data() {
    return {
      markdown: '# Hello World',
      html: ''
    }
  },
  created() {
    this.html = marked(this.markdown)
  }
}

使用 Gridsome

Gridsome 是一个 Vue 驱动的静态站点生成器，适合内容型网站。

创建项目：

npm install --global @gridsome/cli
gridsome create blog

添加 Markdown 支持：

npm install @gridsome/source-filesystem @gridsome/transformer-remark

配置 gridsome.config.js：

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog//*.md',
        typeName: 'Post'
      }
    }
  ]
}

生成静态站点：