官网传送门：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-starter2.使用你喜欢的包管理器进行初始化yarn init # npm init3.将 VuePress 安装为本地依赖我们已经不再推荐全局安装 VuePressyarn 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.md5.在 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:devVuePress 会在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-antdocsconfig.js中添加主题配置theme: 'antdocs'传送门将上述配置已经上传到gitee上，有需要的筒子们可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git你看，奇怪的知识是不是又增加了