初探 VuePress

前言

文檔內容不多，就花半天時間翻譯了一下，比較匆忙，有一些不是很理解的地方翻譯的不是很通順甚至有錯誤，歡迎大家指正。VuePress 中文

個人覺得最大的亮點就是：

1. VuePress 文檔是用 VuePress 寫的
2. markdown 文件可以內嵌 Vue 組件
3. 藉助 YAML 來作為驅動和配置文檔

   ...

自己寫自己的文檔

今天一友人逛掘金的時候發現了這個好東西，遂推薦給我。

抱著玩一玩的心態，我就裝了一個，反正不要錢，哈哈~

可是誰知道不玩不要緊，一玩就吃了閉門羹：

這我就不服氣了，所以趕緊去 github 上提了個 issue，結果這破問題佔據了 issue 榜上一整天，評論數還最多，最後的原因也找到了：Win10 的 Powershell 的鍋。

不過當時我不知道啊，看這報錯像是庫本身有個地方出錯了。出於獵奇的心，我 clone 了一份源碼正準備調試...

咦，它這個 docs 文件夾？貌似就是一份 VuePress 的例子：

要不？在這文件下跑一個 vuepress dev 命令試試？誒！還真跑起來了！

不過新的問題又隨之而來：

這真是讓人頭大，不過幸好現在也被尤大修復了：issue34

所以，我就拋棄了全局從 npm 拉下的包，轉而用項目本身最新的代碼來跑這份文檔。

一切皆組件

文檔里隱藏著一個驚天大秘密：

目前 VuePress 支持的三種格式 html、md、vue 實際上最後都會轉成 vue 組件！

也就是說形成了一個 markdown->html->vue 的管道。

小試牛刀

基於這個我最感興趣的點，我做了一個小組件來體驗一下：代碼編輯組件。

很多時候，我們為了那麼一兩個功能或者 API 不得不重新拉個項目、裝 npm 包，然後漫長的時光渡過了，環境配好，卻已忘記自己要幹啥。

所以，簡單點，像 echarts 或者 G2 那樣，在線調試，所見即所得，多好~

不過最終還是搞出個 demo：

大家也看到了，還有很明顯的 bug：不知道為啥被替換成繁字體聽的空格君，所以丟人的代碼就先不放出來了...

YAML

就拿我剛剛實現的那個在線調試小組件來說，用的時候 markdown 文件里只需要這樣寫：

<CodeEditor :code="$page.frontmatter.code"/>

這個 $page.frontmatter.code 自然就是 markdown 裡面定義的變數了，它使用的是 YAML 語法。

JSON 原來是 YAML 的子集呢！

其他功能

VuePress 還有很多很棒的功能，比如一鍵部署（集成 git）、Algolia DocSearch 集成（藉助 SSR 對 SEO 友好）等也是可圈可點的。只不過今天來不及玩了。

展望

今天的翻譯也引起了我對文檔國際化的思考，Vue 官方其實也在考慮這件事情，只不過要任重道遠~