## 一、概述 **VuePress**是vue官方基于vuejs開發的SPA架構的靜態網站生成器，它基于Vue + webpack； 它可以用來發布個人網站，撰寫文檔等； ## 二、快速開始 這里介紹從零開始，如果是希望在一個既有項目中，引入vuepress來進行項目的文檔管理，則可以跳過前面兩步，從第三步開始； 這里要求的環境，跟一個普通的vuejs項目無差別（nodejs、vuejs、vue-cli及webpack等）； （1）、創建工程目錄，如raydocs； ``` mkdir raydocs cd raydocs //進入工程目錄，后續命令，默認都在工程目錄下執行 ``` （2）、使用包管理器進行初始化（根目錄下生成package.json）； ``` npm init ``` （3）、安裝VuePress 為本地依賴； ``` yarn add -D vuepress ``` （4）、在當前工程目錄下，創建docs子目錄，且創建第一篇文檔README.md（md格式，內容為一句話：# Hello VuePress）； （5）、在 package.json 中添加一些腳本（在scripts字段部分，追加，追加后完整的scripts內容如下）； ~~~ { "scripts": { "test":?"echo?\\"Error:?no?test?specified\\"?&&?exit?1", "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ~~~ （6）、啟動 ~~~ npm run docs:dev ~~~ 效果：  現在，你已經有了一個簡單可用的 VuePress 文檔； ## 三、配置（包括為發布到github做準備） 1、為更好的自定義網站（基于VuePress），為工程需要創建一個配置目錄，命名為`..vuepress`.，一個 VuePress 網站必要的配置文件是`.vuepress/config.js`，它應該導出一個 JavaScript 對象； ~~~ module.exports = { title: 'Hello VuePress', description: 'Just playing around', base:'/blog/' } ~~~ 其中，base屬性，是部署站點的基礎路徑，如果你想讓你的網站部署到一個子路徑下，你將需要設置它，如果你想將你的網站部署到`https://foo.github.io/bar/`，那么`base`應該被設置成`"/bar/"`，它的值應當總是以斜杠開始，并以斜杠結束； 2、 在原 package.json 中添加一些腳本 ``` "deploy-gh":?"yarn?docs:build?&&?bash?deploy-to-github.sh" ``` 追加后完整的scripts內容如下： ``` "scripts":?{ "docs:dev":?"vuepress?dev?docs", "docs:build":?"vuepress?build?docs", "deploy-gh":?"yarn?docs:build?&&?bash?scripts/deploy-to-github.sh" ?}, ``` ## 四、部署到github 將上述基于vuepress的文檔庫，部署到github上，遵循如下步驟； （1）、登陸github，創建倉庫；  （2）、新建一個自動部署腳本，命名為deploy-to-github.sh，放到scripts目錄下； ``` #!/usr/bin/env sh # 確保腳本拋出遇到的錯誤 set -e # 生成靜態文件 npm run docs:build # 進入生成的文件夾 cd docs/.vuepress/dist # 如果是發布到自定義域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果發布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果發布到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages git push -f git@github.com:4170804/press.git master:gh-pages cd - ``` （3）、在當前工程目錄下，執行命令； ``` npm run deploy-gh； ``` 完成后，即可看到效果了，訪問的地址為：  https://4170804.github.io/press/ 就可以看到文檔的主頁了； ## 五、完整實例代碼 0、結構  打包生成的文件目錄為：  1、配置文件  2、腳本文件  3、包管理文件  ## 六、進階應用 主要就是增加了文檔文件以及對應的調整配置文件，如下所示： 1、配置文件 ``` module.exports = { title: 'ray', description: 'work and study', base: '/press/', head: [ ['link', { rel: 'icon', href: '/favicon.ico' }] ], themeConfig: { logo: '/logo.png', repo: '4170804/rayfront', docsDir: 'docs', editLinks: true, editLinkText: '在 Github 上幫助我們編輯此頁', nav: [ {text: '首頁', link: '/'}, {text: '接口', link: '/advance/api'}, {text: '開始', link: '/start/faq'}, ], lastUpdated: 'Last Updated', sidebar: [ { title: '開始', collapsable: false, children: [ '/start/use', '/start/faq' ] }, { title: '開發', collapsable: false, children: [ '/develop/front', '/develop/back' ] }, { title: '進階', collapsable: false, children: [ '/develop/front', '/develop/back' ] } ], nextLinks: true, prevLinks: true, }, plugins: ['@vuepress/back-to-top', require('./plugins/alert')], markdown: { lineNumbers: true } } ``` 2、新增md文件及子目錄  3、提供靜態資源文件  4、配置文件中，需要的插件放到.vuepress/plugins  需求源自：