快速入門
在現有vue項目中安裝本地開發依賴vuepress
yarn add -D vuepress # 或者：npm install -D vuepress
在現有vue項目根目錄下創建docs目錄
mkdir docs
創建並配置文檔首頁內容
在docs目錄下創建README.md文件
運行，查看效果
npx vuepress dev docs
訪問效果如下
可能會出現vue和vue-server-renderer版本不匹配的報錯
解決方案： 顯式安裝和vue版本一致的vue-server-renderer
以下通過示例說明vuepress的基本使用方法
最終效果預覽
示例目錄結構說明
項目根目錄
|—— docs 項目文檔目錄
| |—— README.md 文檔首頁內容
| |—— .vuepress vuepress配置目錄
| | |—— config.js 主配置文件
| | |—— nav.js 導航欄配置文件
| | |—— sidebar.js 左側欄配置文件
| | |—— public 靜態文件目錄
| | | |—— img 存放圖片
| | | | |—— logo.jpg logo圖片
| | | |—— js 存放js文件
| | | | |—— main.js 自定義的js
| | | |—— css 存放css文件
| | | | |—— style.css 自定義的css
| |—— guide
| | |—— README.md 子模塊guide的主頁內容
| | |—— sidebar.js 子模塊guide的左側欄配置文件
| | |—— notes 子模塊guide的文件存放目錄
| | | |—— one.md 文檔一
| | | |—— two.md 文檔二
| |—— help
| | |—— user
| | | |—— README.md
| | | |—— sidebar.js
| | | |—— basic
| | | | |—— one.md
| | | | |—— two.md
| | | | |—— three.md
| | | |—— senior
| | | | |—— one.md
| | | | |—— two.md
| | | | |—— three.md
| | |—— manager
| | | |—— README.md
| | | |—— sidebar.js
| | | |—— daily
| | | | |—— one.md
| | | | |—— two.md
| | | |—— regular
| | | | |—— one.md
| | | | |—— two.md
頁面效果和文件對應關系說明
（Window OS）將項目文檔部署到Gitee上
創建用於部署項目文檔的倉庫
創建過程（略）
配置script
在項目根目錄創建build.bat和deploy.bat
build.bat內容：
@echo off
npm run docs:build
deploy.bat內容：
@echo off
REM 構建生成靜態文件
echo building...
call build.bat
echo building-complete
REM 進入生成的文件夾
cd docs/.vuepress/dist
REM 如果是發布到自定義域名
REM echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
REM 如果發布到 https://gitee.com/<USERNAME>
REM git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
REM 如果發布到 https://gitee.com/<USERNAME>/<REPO>
git push -f https://gitee.com/nicke/ni-report-blog.git master:gh-pages
cd ..
cd ..
cd ..
echo Auto-Deploy-Complete
在config.js中加入base設置
注： ni-report-blog是gitee上的倉庫名
執行腳本命令deploy(完成構建，並推送到倉庫的gh-pages分支上)
開啟Gitee Pages服務
等待更新完畢，即可訪問
