前言
最近公司是要重構一下我們的SDK文件，之前是用的gitbook來生成的，效果摻不忍睹，樣式不好看就不好說了，之前的老哥寫得東西語法很亂，改起來很費解，索性就乾脆來個大換血。
之前有用過各種的文章部落格框架，比如：大名鼎鼎的hexo，比較流行的docsify，以及Docute。但是效果都不是很理想。想著既要樣式好看，告別千篇一律，更要結構清晰，語法簡單，能夠支援自定義，更加自由的文件框架。
知道發現了尤大大最近寫的vuepress框架，一下子興趣就來了，基於vue，對於我來說很是合胃口。接觸過vue的都知道，vue上手簡單，用起來很順手，原諒我口才不是很好。就是讓你眼前一亮的前端框架，這裡我就不再贅述了。
VuePress是什麼？
VuePress是以Vue驅動的靜態網站生成器，是一個由Vue、Vue Router和webpack驅動的單頁應用。在VuePress中，你可以使用Markdown編寫文件，然後生成網頁，每一個由VuePress生成的頁面都帶有預渲染好的HTML，也因此具有非常好的載入效能和搜尋引擎優化。同時，一旦頁面被載入，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用，其他的頁面則會只在使用者瀏覽到的時候才按需載入。
VuePress特性
-
為技術文件而優化的內建Markdown擴充
-
在Markdown檔案中使用Vue元件的能力
-
Vue驅動的自定義主題系統
-
自動生成Service Worker(支援PWA)
-
Google Analytics整合
-
基於Git的"最後更新時間"
-
多語言支援
-
響應式佈局
嗯，是那種給人很舒服的樣子
尤大大是這樣一句話介紹的：
像數 1, 2, 3 一樣容易
# 安裝
yarn global add vuepress # 或者：npm install -g vuepress
# 新建一個 markdown 檔案
echo '# Hello VuePress!' > README.md
# 開始寫作
vuepress dev .
# 構建靜態檔案
vuepress build .
複製程式碼好吧。我們們也來試試看
環境搭建
1、全域性安裝vuepress
yarn global add vuepress # 或者：npm install -g vuepress
複製程式碼官網提供了2種方式（預設你已經擁有node環境以及yarn&npm）
-
yarn
-
npm
這裡要特別說明強調一下，強烈推薦yarn，因為用npm會出現奇怪的錯誤。
我一開始用npm的時候，是直接從github拉的程式碼，發現根本跑不動啊，這就很尬尷了，然後在lessues上面看到了跟我一模一樣的報錯的老哥，發現是npm的鍋，果斷棄用npm改為yarn，果然錯誤解決，成功執行起來專案
2、建立專案目錄
mkdir project
cd project
複製程式碼3、初始化專案
yarn init -y # 或者 npm init -y
複製程式碼4、然後我們開始寫作
這個時候，你的專案應該是有這2個檔案的
新建一個markdown檔案，你當然測試的話，可以直接用命令列
# 新建一個 markdown 檔案
echo '# Hello VuePress!' > README.md
複製程式碼但是我們一般都是自己在檔案管理器新建一個，這裡假設你已經建好一個檔案了。
5、接著就可以直接執行命令列
vuepress dev
複製程式碼
然後開啟你的本地地址，如果執行成功，且沒報錯。
那麼你就將會看到以後畫面
這個時候，恭喜你，你已經成功執行起了vuepress框架，可以隨意編寫你的文件了。
小結
當然，這種程度的肯定不夠，但是我們首先基礎可以先打好，無論文件寫的多好，還是先得要一步步來不是？這僅僅是第一步而已。
下一次，我們們就開始講解如何配置它。。。
順便求一波關注，微信公眾號（不穿格子襯衫的程式設計師）
