VuePress 静态网站生成器入门指南

VuePress 简介与核心特性

了解 VuePress 的基本定义。

VuePress 主要由两个部分构成：一是基于 Vue.js 构建的轻量级静态网站生成器核心；二是专为技术文档编写优化的默认主题。该工具最初是为了满足 Vue 官方子项目文档的生成需求而设计开发的。

VuePress 会为生成的每个页面提供预加载的 HTML 内容，这不仅显著提升了页面的加载速度，同时也对搜索引擎优化（SEO）非常友好。当页面加载完成后，Vue 会接管所有的静态内容渲染，将其转化为一个完整的单页应用（SPA）。此外，其他页面会在用户通过导航访问时按需加载，确保性能与体验的平衡。

根据官方文档说明，该项目具备以下主要特点：

• 内置 Markdown 支持（基础功能）
• 支持 PWA（渐进式 Web 应用）
• 集成 Google Analytics 统计功能
• 提供一套默认主题，其风格与官方文档站点保持一致
• 自动生成 GitHub 仓库链接及页面编辑链接

快速上手：安装与初始化

接下来介绍如何快速上手使用 VuePress。

首先进行环境安装与项目初始化。

第一步是初始化项目目录。

npm init -y

执行命令 生成 package.json 文件。随后安装 vuepress，可以选择局部安装到项目中，也可以选择全局安装。

npm install -D vuepress

执行命令 创建用于存放文档的 docs 文件夹。

mkdir docs

在 package.json 中配置相应的脚本命令，具体配置如下所示：

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

文档编写与本地预览

开始撰写文档内容。

只需在 docs 文件夹下新建 Markdown 文件，即可直接编辑和书写文章。

本地预览开发效果。

npm run docs:dev

运行命令 启动本地服务，然后在浏览器中打开 http://localhost:8080/ 即可预览生成的网站。

执行生产环境构建。

npm run docs:build

运行命令 进行构建，生成的静态文件默认会输出到 .vuepress/dist 文件夹中。

自定义配置：导航与侧边栏

介绍如何对 VuePress 进行自定义配置。

可以将自定义配置写入 .vuepress/config.js 文件中。

配置顶部导航栏，示例代码如下：

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

配置侧边栏导航，示例代码如下：

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

侧边栏同时支持分组添加，示例配置如下：

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

对 VuePress 的使用进行简要总结。

以上内容介绍了基于 Vue-SSR 的静态网站生成器 VuePress 的基本使用方法，希望能为读者提供帮助。如有任何疑问，欢迎留言交流，小编会及时回复。在此感谢大家对本站的支持！