利用VuePress快速搭建项目文档管理系统

VuePress是一个由 Vue、Vue Router 和 webpack 驱动的单页应用;同时它拥有一套书写技术文档的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求,当然也可以用于别的语言项目。

特性:

Markdown编写文档,直接转换HTML对SEO友好单页面响应快省资源纯前端无需数据库演示:

首页

左侧导航

MarkDown文档

部署:

# 将 VuePress 作为一个本地依赖安装

yarn add -D vuepress # 或者:npm install -D vuepress

# 新建一个 docs 文件夹

mkdir docs

# 新建一个 ** rkdown 文件

echo # Hello VuePress! > docs/README.md

接着,在 package.json 里加一些脚本

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

然后就可以开始写作了

yarn docs:dev # 或者:npm run docs:dev

要生成静态的 HTML 文件,运行:

yarn docs:build # 或者:npm run docs:build

默认情况下,文件将会被生成在 .vuepress/dist,当然,你也可以通过 .vuepress/config.js 中的 dest 字段来修改,生成的文件可以部署到任意的静态文件服务器上

目录结构

├─ docs│ ├─README.md│ └─ .vuepress│ └─ config.js└─ package.json

配置:

module.exports = {title: 文档管理, //项目名称description: ,themeConfig: {nav: [ //顶部菜单{ text: 主页, link: / },{ text: Java,items: [{ text: SpringBoot, link: /SpringBoot/ },{ text: SpringCloud, link: /SpringCloud/ }]},{ text: 关于, link: /about }],search: false,//是否开启搜索searchMaxSuggestions: 10,sidebar: { //侧边栏菜单/SpringBoot/: [,microservices-introduction],/SpringCloud/: [,distributed-lock-redis-vs-zookeeper,distributed-session],/: [about]},lastUpdated: Last Updated,}

Copyright © All Rights Reserved

扫码免费用

源码支持二开

申请免费使用

在线咨询