VuePress是一個由 Vue、Vue Router 和 webpack 驅動的單頁應用；同時它擁有一套書寫技術文檔的默認主題，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求，當然也可以用於別的語言項目。

瞭解Vue.js可以看看這篇文章，熟練者跳過此部

特性：

• Markdown編寫文檔，直接轉換HTML
• 對SEO友好
• 單頁面響應快
• 省資源
• 獲取資源方式往下看↓↓↓↓↓↓↓
• 純前端
• 無需數據庫

演示：

首頁

左側導航

MarkDown文檔

部署：

# 將 VuePress 作為一個本地依賴安裝

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

# 新建一個 docs 文件夾

mkdir docs
 

# 新建一個 markdown 文件

echo '# Hello VuePress!' > docs/README.md

接著，在 package.json 里加一些腳本:

{
 "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', 
 }
}

獲取方式

關注+轉發+私信“vuepress”，自動發送資源地址

另一個Vue.js+SpringBoot的文檔管理系統