什么是vuePress

vuePress是以vue驅(qū)動(dòng)的主題系統(tǒng)的簡(jiǎn)約靜態(tài)網(wǎng)站生成工具（擁有自己的默認(rèn)主題）。

veuPress由vue,vue-router,webpack驅(qū)動(dòng)的單頁(yè)面應(yīng)用，每個(gè)markdonw文件都使用markdonw-it編譯為html文件，然后作為vue組件的模板來(lái)處理。

中文官網(wǎng)
VuePress倉(cāng)庫(kù)
項(xiàng)目地址

VuePress 有很多優(yōu)點(diǎn)：

安裝vuePress

全局安裝

在此方式中，只是要項(xiàng)目根目錄創(chuàng)建了一個(gè)README.md文件，直接執(zhí)行訪問(wèn)的就是此文件

npm install -g vuepress# 創(chuàng)建一個(gè) markdown 文件echo '# Hello VuePress' > README.md# 開(kāi)始編寫文檔vuepress dev# 構(gòu)建vuepress build

在已有項(xiàng)目中安裝

# 安裝為本地依賴項(xiàng)npm install -D vuepress# 創(chuàng)建一個(gè) docs 目錄mkdir docs# 創(chuàng)建一個(gè) markdown 文件echo '# Hello VuePress' > docs/README.md# 開(kāi)始編寫文檔npx vuepress dev docs

還可以在package.json中添加js腳本，官網(wǎng)方式不好寫，我們直接用常用的方式

{ "scripts": {  "start": "vuepress dev docs",//運(yùn)行  "build": "vuepress build docs"http://打包 }}

使用vuePress搭建靜態(tài)博客

接下來(lái)就是配置了，我會(huì)直接把我的配置文件貼上來(lái)，我們先看結(jié)構(gòu)

博客結(jié)構(gòu)

博客結(jié)構(gòu)分為主頁(yè)，導(dǎo)航欄，側(cè)邊欄

在.docs目錄下新建一個(gè).vuePress文件，在此注意，搭建博客過(guò)程中所有的配置文件以及內(nèi)容文件、主題等都放在此目錄中
在.vuePress文件夾下新建三個(gè)文件,public用來(lái)放圖片等靜態(tài)文件，theme中放到博客用到的主題，config.js中存放所有的配置

.vuePress ---public ---theme ---config.js

在.docs文件夾下新建幾個(gè)模塊文件夾，比如我的就分為學(xué)習(xí)筆記、問(wèn)題記錄、關(guān)于我等,每個(gè)文件夾下再新建md文件

vuePress會(huì)自動(dòng)把README.md設(shè)置為導(dǎo)航的主頁(yè)，所以如果我們需要主頁(yè)就先建README.md,再新建first.md,seconde.md等文件作為側(cè)邊欄要顯示的文件

.docs ---.vuePress ---about  ---README.md  ---first.md  ---seconde.md ---study ---problem

具體配置

最重要的config.js配置

在此值得注意的是，主題配置不只是簡(jiǎn)單的樣式配置等，其中包括導(dǎo)航與側(cè)邊欄部分的配置，此處配置參見(jiàn)官網(wǎng)導(dǎo)航欄”默認(rèn)主題配置“

module.exports = { //網(wǎng)站標(biāo)題 title: '霍夢(mèng)林的個(gè)人博客', // 主頁(yè)描述 description: 'Just playing around', // 要部署的倉(cāng)庫(kù)名字 base: '/', dest: './docs/.vuepress/dist', // 主題配置 themeConfig: {  // 導(dǎo)航配置  nav: [   // text為導(dǎo)航欄顯示文字，link為路徑，即文件夾名字，注意不要丟了名字前后的'/'   {text: 'Home', link: '/'},   {text: 'About', link: '/about/'},   {text: 'Problem', link: '/problem/'},   {text: 'Study', link: '/study/'},   {text: 'CSDN', link: 'http://blog.csdn.net/weixin_38318244/'},   {text: 'Github', link: 'https://github.com/momo-0902'}  ],  // 側(cè)邊欄配置,側(cè)邊欄組，不同（導(dǎo)航）頁(yè)面對(duì)應(yīng)不同的側(cè)邊欄  // 以對(duì)象形式配置，前邊的key為nav處的路徑,后邊提供一個(gè)數(shù)組作為此側(cè)邊欄中的子標(biāo)題  sidebar: {   '/problem/': [    // ''空字符串代表主頁(yè)，顯示README.md中的內(nèi)容    '',    ['201709', '201709'],//使用數(shù)組為側(cè)邊欄起別名，前邊是md名稱，后邊是鏈接顯示的文字    ['201710', '201710'],    ],   '/study/': [    '',    ['axios', '1.axios'],    ['document', '2.document'],    ]  },  // 這是嵌套標(biāo)題鏈接，自動(dòng)顯示當(dāng)前激活（導(dǎo)航）頁(yè)面標(biāo)題的鏈接，即顯示深度（h1-h6的深度）  sidebarDepth: 1 }}