vuepress官方教程爵政，em...也是用vuepress搭建的，哈哈狂窑。
這句很經(jīng)典粹庞，也是表明了vuepress最好的用處：
VuePress 專注在以內容為中心的靜態(tài)網(wǎng)站上，同時提供了一些為技術文檔定制的開箱即用的特性捌朴。
當前版本v1.0
使用這個框架吴攒，不需要服務器，不需要空間砂蔽，只要有支持pages的git托管倉庫就可以搭建一個技術文檔站點洼怔，任性！當然你也可以放到自己的服務器上直接作為靜態(tài)網(wǎng)站使用左驾，無所謂镣隶。
我這里使用的是碼云Gitee，國內的诡右，好用安岂！
在碼云上申請賬號，然后新建倉庫帆吻，這些流程不做演示了域那。我這里的倉庫名稱是vuepress，劃重點猜煮，后面要用４卧薄！王带！
因為后面所作的操作淑蔚，都在這里面，后面還要用到這個倉庫
git到本地（從下圖指示找倉庫下載地址位置愕撰，按個人喜歡的方式把項目clone到本地）
git clone https://gitee.com/axhuangs/vuepress.git
進入到本地倉庫刹衫，并且安裝vuepress框架到本地(npm和yarn喜歡哪個都行醋寝，但是需要安裝相應的工具)
下面開始按順序來做：
1. 使用你喜歡的包管理器進行初始化， 我比較喜歡npm
npm init
// yarn init
最后會有一句確認信息截圖沒有截全Is this OK? (yes) 敲入yes或者y直接回車就可以
2.將 VuePress 安裝為本地依賴（就是下載vuepress框架到本地）
npm install -D vuepress
//yarn add -D vuepress
不要在意太多黃色的細節(jié)绪妹，正經(jīng)的應該這樣就表明安裝成功了甥桂。
另外我一直再用vscode的窗口操作柿究，所以項目完成之后邮旷，會出現(xiàn)下面的提示：
點擊
是，主要是一般node_modules文件有的沒有的一大堆（有一部分這個原因蝇摸，所以node的作者又生了個新兒子deno）婶肩，占空間比較大，所以一般情況下咱們不上傳到遠端貌夕，浪費空間律歼，有package.json文件，在這個項目下載到別的地方的時候在根目錄運行npm install一下就可以了啡专，你會驚奇的發(fā)現(xiàn)险毁，node_modules又出來了。
3.重點來了们童！新建第一個文檔
老老實實創(chuàng)建一個文件夾docs畔况， 然后新建一個文件README.md，并且用markdown的方式寫上一句慧库，嗯跷跪，老老實實...， 我這里用官方提供的方式齐板，報錯...
# Hello VuePress
4.在 package.json 中添加下面的話
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
很重要的兩句話吵瞻，一句是運行本地開發(fā)環(huán)境，一句是打包準備部署到線上的文件
5.在本地啟動服務器 來查看成果了
npm run docs:dev
//yarn docs:dev
經(jīng)過各種輸出和好看的進度條之后甘磨，你會看到下面的信息：
說明啟動起來了橡羞，瀏覽器打開: http://localhost:8080/:
那么現(xiàn)在你修改
README.md文件， 這里會實時更新
到這里济舆，前期搭建基本上及可以算是搞定了卿泽。
如果需要markdown的書寫方式的話，可以去看看
再墨跡點很重要的東西最后在說怎么布置到碼云上
現(xiàn)在頂部和左側還是跟官方文檔差點兒東西
左側導航配置
在docs文件夾下新建文件夾.vuepress 并且新建config.js
module.exports = {
title: 'vuepress文檔', // 文檔標題吗冤，左上角顯示
description: 'vuepress文檔描述',
base: '/vuepress/', // 這里寫你的倉庫名稱
head: [
['link', { rel: 'shortcut icon', type: "image/x-icon", href: `/jyjwebdocs/favicon.ico` }]
], //這里配置你的網(wǎng)頁頭部信息等
themeConfig: {
/**
* 設置側邊欄最大深度
* 一般是以單個md文件中的 # ## ### #### 這幾個標題文字為錨點自動生成導航
* **/
sidebarDepth: 4,
// 設置側邊欄內容
sidebar: [
{
title: '第一個側邊欄',
collapsable: false, // 是否具有展開收起功能
children: ['/firstslde/'] // 這個是根據(jù)自己的需求來訂又厉，對應自己在docs下的文件夾名，默認首頁是README.md
}
]
}
}
注意：每次配置config.js文件都需要重新運行一下項目
這是目前的目錄結構:
這是docs/firstside/README.md下的內容:
# 第一個側邊欄
firstside
firstside
firstside
firstside
## 二級第一個側邊欄
二級第一個側邊欄
二級第一個側邊欄
## 二級第二個側邊欄
二級第二個側邊欄
二級第二個側邊欄
### 三級第一個側邊欄
三級第一個側邊欄
三級第一個側邊欄
三級第一個側邊欄
## 二級第三個側邊欄
二級第三個側邊欄
二級第三個側邊欄
二級第三個側邊欄
重新運行npm run docs:dev之后效果是這樣的:
當然有的時候整篇內容會比較長椎瘟，或者分不同的模塊覆致，那么就可以多建幾個md文件，并在config.js中配置一下
比如我在/firstside/文件夾下創(chuàng)建了otherModel.md文件肺蔚，并創(chuàng)建了child文件夾煌妈，如下：
config.js的配置是這樣的：
// 設置側邊欄內容
sidebar: [
{
title: '第一個側邊欄',
collapsable: false,
children: ['/firstside/', '/firstside/otherModel', '/firstside/child/']
}
// 根據(jù)自己的需求來訂，對應自己在docs下的文件夾名，默認首頁是README.md
]
運行效果是這樣的：
config.js中的sidebar的配置方式可以組合各種姿勢璧诵，下面只是一個小栗子汰蜘，可以試下，當然開啟更多組合之宿，需要你來定族操，這里只是介紹一下基礎方式
這是目錄結構：
這是config.js側邊欄設置
// 設置側邊欄內容
sidebar: [
{
title: '第一個側邊欄',
collapsable: false,
children: ['/firstside/', '/firstside/otherModel', '/firstside/child/'] // 這個是根據(jù)自己的需求來訂，對應自己在docs下的文件夾名比被，默認首頁是README.md
},
{
title: '第二個側邊欄',
collapsable: true, // 開啟展開收起功能色难，注意下圖中菜單名稱旁邊的小角標
children: [
'/second/',
{
title: '側邊欄組合',
collapsable: true,
children: [
'/second/child/',
'/second/child/secondChild'
]
}
]
}
]
最后的展示效果：
側邊欄差不多就這些了，當然還有頂部導航部分設置
// 設置菜單
nav: [
{ text: '首頁', link: '/' },
{ text: '其他文檔', items: [
{ text: 'demo1', link: 'http://www.baidu.com' },
{ text: 'demo2', link: 'http://www.baidu.cn' },
] }
],
nav與sidebar為同級
效果：
config.js的全部內容
module.exports = {
title: 'vuepress文檔',
description: 'vuepress文檔描述',
base: '/vuepress/', // 這里寫你的倉庫名稱
head: [
['link', { rel: 'shortcut icon', type: "image/x-icon", href: `/jyjwebdocs/favicon.ico` }]
], //這里配置你的網(wǎng)頁頭部信息等
themeConfig: {
nav: [
{ text: '首頁', link: '/' },
{ text: '其他文檔', items: [
{ text: 'demo1', link: 'http://www.baidu.com' },
{ text: 'demo2', link: 'http://www.baidu.cn' },
] }
],
/**
* 設置側邊欄最大深度
* 一般是以單個md文件中的 # ## ### #### 這幾個標題文字為錨點自動生成導航
* **/
sidebarDepth: 4,
// 設置側邊欄內容
sidebar: [
{
title: '第一個側邊欄',
collapsable: false,
children: ['/firstside/', '/firstside/otherModel', '/firstside/child/'] // 這個是根據(jù)自己的需求來訂等缀，對應自己在docs下的文件夾名枷莉，默認首頁是README.md
},
{
title: '第二個側邊欄',
collapsable: true,
children: [
'/second/',
{
title: '側邊欄組合',
collapsable: true,
children: [
'/second/child/',
'/second/child/secondChild'
]
}
]
}
]
}
}
基本上頁面配置就這些，主要還是config.js的配置
如果想放入圖片的話
個人覺得最好的方式就是哪里需要放哪里尺迂，但是目前還沒想到怎么配置
目前總結到的方法是笤妙，把圖片放到新建目錄.vuepress/public/assets/下，
這樣打完包之后圖片會被load到dist/assets/下面
然后再使用的地方噪裕，基本可以用兩種方式引入
<img :src="$withBase('/assets/firstside_01.jpg')" alt="foo">
效果是這樣的
最最重要的點來了
打包:
npm run docs:build
打包完成蹲盘，使用git把整個源碼上傳到碼云吧
然后來到碼云的倉庫嘍
找到你的倉庫，打開Gitee Pages
點擊啟動州疾，等待部署完成
大工告成辜限，上面已經(jīng)出現(xiàn)了你的文檔鏈接
注意：每次修改文檔內容，哪怕一個標點符號严蓖，都需要到這里更新一下薄嫡，才能正確顯示文檔
