利用VuePress快速搭建項(xiàng)目文檔管理系統(tǒng)
VuePress是一個(gè)由 Vue、Vue Router 和 webpack 驅(qū)動(dòng)的單頁(yè)應(yīng)用;同時(shí)它擁有一套書(shū)寫(xiě)技術(shù)文檔的默認(rèn)主題,它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求,當(dāng)然也可以用于別的語(yǔ)言項(xiàng)目。
了解Vue.js可以看看這篇文章,熟練者跳過(guò)此部
Vue.js快速入門(mén)就從這兒開(kāi)始特別是后端程序員
特性:
- markdown編寫(xiě)文檔,直接轉(zhuǎn)換HTML
- 對(duì)SEO友好
- 單頁(yè)面響應(yīng)快
- 省資源
- 獲取資源方式往下看↓↓↓↓↓↓↓
- 純前端
- 無(wú)需數(shù)據(jù)庫(kù)
演示:
首頁(yè)
左側(cè)導(dǎo)航
MarkDown文檔
部署:
# 將 VuePress 作為一個(gè)本地依賴(lài)安裝
yarn add -D vuepress # 或者:npm install -D vuepress
# 新建一個(gè) docs 文件夾
mkdir docs
# 新建一個(gè) markdown 文件
echo ‘# Hello VuePress!’ > docs/README.md
接著,在 package.json 里加一些腳本:
{ “scripts”: { “docs:dev”: “vuepress dev docs”, “docs:build“: “vuepress build docs” }}
然后就可以開(kāi)始寫(xiě)作了:
yarn docs:dev # 或者:npm run docs:dev
要生成靜態(tài)的 HTML 文件,運(yùn)行:
yarn docs:build # 或者:npm run docs:build
默認(rèn)情況下,文件將會(huì)被生成在 .vuepress/dist,當(dāng)然,你也可以通過(guò) .vuepress/config.js 中的 dest 字段來(lái)修改,生成的文件可以部署到任意的靜態(tài)文件服務(wù)器上
目錄結(jié)構(gòu):
├─ docs│ ├─ README.md│ └─ .vuepress│ └─ config.js└─ package.json
配置:
module.exports = { title: ‘文檔管理’, //項(xiàng)目名稱(chēng) description: ”, themeConfig: { nav: [ //頂部菜單 { text: ‘主頁(yè)’, link: ‘/’ }, { text: ‘Java’, items: [ { text: ‘SpringBoot’, link: ‘/SpringBoot/’ }, { text: ‘SpringCloud‘, link: ‘/SpringCloud/’ } ] }, { text: ‘關(guān)于’, link: ‘/about’ } ], search: false,//是否開(kāi)啟搜索 searchMaxSuggestions: 10, sidebar: { //側(cè)邊欄菜單 ‘/SpringBoot/’: [ ”, ‘microservices-introduction’ ], ‘/SpringCloud/’: [ ”, ‘distributed-lock-redis-vs-zookeeper’, ‘distributed-session’ ], ‘/’: [ ‘about’ ] }, lastUpdated: ‘Last Updated’, }}
獲取方式
關(guān)注 轉(zhuǎn)發(fā) 私信“vuepress”,自動(dòng)發(fā)送資源地址
另一個(gè)Vue.js SpringBoot的文檔管理系統(tǒng)
搭建文檔管理系統(tǒng)幫助團(tuán)隊(duì)構(gòu)建一個(gè)信息共享文檔管理的協(xié)作環(huán)境