????之前一直手寫文檔红碑，真心累啊舞吭，尤其只有一個人維護的時候，而且如果想要做完美析珊，工作量巨大羡鸥，最近發(fā)現(xiàn)了vuePress這個好東西，一天能搞定一個基礎(chǔ)的的文檔忠寻，太方便了惧浴。
這里是我寫的一個demo，如果沒有耐心看下面的文字锡溯，可以直接拿去改改就用：
下面主要是完成一個簡單項目的步驟赶舆，不可能將細(xì)枝末節(jié)全部說清楚，所以具體知識點還請移步官方文檔?
前言：
以下命令都使用yarn進行操作
npm install -g yarn? ? ? ?安裝yarn祭饭，日常建議使用yarn，比較快
yarn config set registry?https://registry.npm.taobao.org -g? ? ? ?設(shè)置淘寶下載源
1.創(chuàng)建項目
1.1 創(chuàng)建項目命令
mkdir vuepress && cd vuepress?? ?????創(chuàng)建文件夾
yarn init? ? ????????初始化項目
yarn add-D vuepress? ?? ? ????安裝vuepress
mkdir docs && echo # Hello VuePress > docs/README.md? 創(chuàng)建docs文件夾和readme.md文件
yarn add less less-loader --dev?安裝less叙量，根據(jù)自己的css語言自行選擇安裝
npm install element-ui -S?安裝element-ui 倡蝙，自行選擇是否安裝
1.2 修改package.json配置
增加：
"scripts":?{
????"dev":?"vuepress?dev?docs?--temp?.temp",
????"build":?"vuepress?build?docs"
??},
加temp是為了解決vuepress 不會熱刷新的問題
1.3 創(chuàng)建目錄
docs目錄下創(chuàng)建：
.vuepress
????components文件夾? ?和vue項目的component類似，用來放自定義組件
????styles 文件夾? ??
? ? ? ? ?????index.styl 文件? ?css樣式放在這里绞佩，不要改文件名字寺鸥，后綴名也不可改
????config.js?文件? ? 類似vue項目的vue.config.js 配置文件
????enhanceApp.js??文件? ? ?類似vue項目的main.js入口文件
1.4 運行
yarn run dev????? 運行
http://localhost:8080/? ????打開頁面
2.導(dǎo)航配置
分析導(dǎo)航后猪钮，在?docs?的根目錄創(chuàng)建對應(yīng)的文件夾和readme.md文件
2.1創(chuàng)建目錄
使用說明? ????對應(yīng)????? ?/guide/ ????和?????/guide/README.md
組件? ? ? ? ? ? ?對應(yīng)????????/component/?????和?????/component/README.md
API? ? ? ? ? ? ? 對應(yīng)? ??????/api/?????和?????/api/README.md
更改日志? ? ?對應(yīng)? ? ????/log/?????和?????/log/README.md
創(chuàng)建完目錄之后，在readme.md中隨便寫點文字
2.2 配置導(dǎo)航和側(cè)邊欄
打開.vuepress里面的config.js 胆建，并且復(fù)制以下代碼：
module.exports?=?{
????title:?'頭部左邊標(biāo)題',
????description:?'meta的描述內(nèi)容',
????//?注入到當(dāng)前頁面的?HTML?<head>?中的標(biāo)簽
????head:?[
????????['link',?{
????????????rel:?'icon',
????????????href:?'/favicon.ico'
????????}],?//?增加一個自定義的?favicon(網(wǎng)頁標(biāo)簽的圖標(biāo))
????],
????base:?'/',?
????markdown:?{
????????lineNumbers:?true?//?代碼塊顯示行號
????},
????themeConfig:?{
????????nav:?[{
????????????????text:?'使用說明',
????????????????link:?'/guide/'
????????????},
????????????{
????????????????text:?'組件',
????????????????link:?'/component/'
????????????},
????????????{
????????????????text:?'API',
????????????????link:?'/api/'
????????????},
????????????{
????????????????text:?'更改日志',
????????????????link:?'/log/'
????????????},
????????],
????????sidebar:?{
????????????'/guide/':?[''],
? ? ? ? ? ? '/component/':?[?''],
????????????'/api/':?[''],
????????????'/log/':?[''],
????????},
????????sidebarDepth:?2
????},
};
2.3 重啟運行
重啟之后烤低，我們可以看到以下效果，點擊右上角的導(dǎo)航笆载，會發(fā)現(xiàn)頁面會發(fā)生切換
2.4 修改docs根目錄的readme.md代碼
注意：下面的1.jpg 實際路徑為 .vuepress/public/1.jpg?
---
home:?true
heroImage:?/1.jpg? ?
actionText:?快速上手?→
actionLink:?/guide/
features:
-?title:?簡潔至上
??details:?以?Markdown?為中心的項目結(jié)構(gòu)扑馁，以最少的配置幫助你專注于寫作。
-?title:?Vue驅(qū)動
??details:?享受?Vue?+?webpack?的開發(fā)體驗凉驻，在?Markdown?中使用?Vue?組件腻要，同時可以使用?Vue?來開發(fā)自定義主題。
-?title:?高性能
??details:?VuePress?為每個頁面預(yù)渲染生成靜態(tài)的?HTML涝登，同時在頁面被加載的時候雄家，將作為?SPA?運行。
footer:??2021胀滚，rainlofty趟济，mengmanyan@163.com
---?
