官网传送门：https://www.vuepress.cn

简洁至上：

以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

Vue 驱动：

享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。

高性能：

VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

使用场景

VuePress可生成出全静态的文档结构，可用于知识库、文档库，甚至写作库的建立；

可根据Vue的基础功能进行扩展，扩展出前后端交互的功能；

有UI开发的筒子们可以自定义主题，创建更加美观的文档库；

下面是以我本地为例进行的操作，相关nodejs、npm环境初始化的工作不是本文展示的重点

基本操作

以下内容来自VuePress官网的快速开始

前提条件

VuePress 需要 Node.js (opens new window) >= 8.6

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

1.创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2.使用你喜欢的包管理器进行初始化

yarn init # npm init

3.将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

yarn add -D vuepress # npm install -D vuepress

注意

如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window) 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误地依赖树。

4.创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

5.在 package.json 中添加一些 scripts (opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

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

6.在本地启动服务器

yarn docs:dev # npm run docs:dev

VuePress 会在http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。

更多的操作可以按照官网的说明进行完成。

以下是本地经过初始化设置好的配置，可以帮助你实现初始化，带有导航、侧边栏分组的项目

通用配置

首页配置

---
home: true
heroImage: logo.png
heroText: 系统名称
tagline: 文档中心
actionText: 快速上手 →
actionLink: /guide/
features:
- title: title1
  details: 描述1
- title: title2
  details: 描述2
- title: title3
  details: 描述3
footer: Copyright ? 2022-present xxx
---

## 这是内容标题1

内容

---

## 这是内容标题2

内容

---

## 这是内容标题3

内容

config.js模板配置

module.exports = {
    base: "/demodocs/",
    // 主题和它的配置
    title: "Docs",
    // theme: 'antdocs',
    themeConfig: {
      logo: '/logo.png',
      nav: [
        { text: '主页', link: '/' },
        { text: '指导', link: '/guide/' },
        { text: '实例01', link: '/demo01/' },
        {
          text: '其他',
          items: [
            { text: '标题01', link: '/' },
            { text: '百度一下吧', link: 'https://www.baidu.com' },
          ]
        },
        { text: '百度一下', link: 'https://www.baidu.com' },
      ],
      sidebar: {
        '/guide/': [
          {
            title: '指导页面',
            children: [
              '', 'markdown-base','markdown-more'
            ]
          }
        ],
      }
    },
    plugins: ['@vuepress/back-to-top']
  }

界面样式

首页

导航及侧边栏

AntDoc主题设置

yarn add -D vuepress-theme-antdocs

config.js中添加主题配置theme: 'antdocs'

传送门

将上述配置已经上传到gitee上，有需要的筒子们可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git

你看，奇怪的知识是不是又增加了