Nothing is true. Everything is permitted.

寫在前面

先聊聊為什麼想到了要用Vuepress來代替原來寫在Confluence上的文件。

大意是有個需要其他部門接入的專案，這個專案有個用md寫的接入文件，其他部門的人需要看著這個文件才知道怎麼接以及哪些東西需要接。

但是有個問題是這個文件長的一匹，有多長呢？

而且這個md檔案是放在confluence上的。

本身用confluence閱讀md的體驗就不好，這個文件能夠讓你的滾輪滾個足足十多秒，skr~。

你想要看的某個小章節就藏在這一大坨文字裡。即使從最上面的導航錨點定位到了想要看的地方，但是你看著看著，滑著滑著就不知道自己在哪兒了。

然後找了半天，要麼你運氣好找到了。要麼就只有回到最上面的導航，在一堆導航裡再找一次。如果你運氣究極不好，可能還要把上面的步驟重複幾次，真的到了那個時候，你的心態可能就炸了。還接個毛的業務，心裡只想找到寫文件的人，然後一頓操作。

這就是為什麼，我想換個方式來展示這個介面文件。

說到這個，又不得不吐槽。去網上找了很多vuepress的使用，總體下來兩個字，複雜。再去看看vuepress的官方文件（雖然最後的解決方案都是在官方找到的），總結下來也是兩個字，懵逼（因為我想找的那個地方藏得比較深）。

於是就有了寫這一期硬核教程。

Don't BB, 你這個專案啟起來到底啥樣？

我看的很多教程，都是在沒有背景、沒有程式碼、沒有效果的情況就開始了。讓本來希望通過這個教程入門的人懵上加懵（比如我）。

Github地址：-> 戳此 <-

牆裂建議，先拉下來看看效果。

直接npm install安裝完依賴之後，直接npm start即可。在你本地的8080埠就會執行一個如下的介面。

並不是自動開啟瀏覽器，需要手動進入本地專案地址

然後點開始開發會進入到如下的詳細介面。

左邊就是我們需要詳細展示的文件，可以看到我簡單的分了兩類作為樣例。

好了好了，效果看到了，Show me the code

首先，這個專案的目錄長這樣。

.
├── .vuepress
│   ├── config.js
│   ├── public
│   │   └── logo.jpg
│   └── router.js
├── LICENSE
├── README.md
├── groupA
│   ├── README.md
│   └── 類別A的李四.md
├── groupB
│   ├── README.md
│   └── 類別B的張三.md
├── package-lock.json
└── package.json
 

接下來就分別將一下首頁和詳情頁是怎麼來的，以及如果需要加一個頁面（也就是路由）該怎麼做。

首先是首頁

專案的根目錄下的README.md就是你剛剛看到的首頁。裡面的原始碼長這樣，你可以對比首頁來看。

---
home: true
heroImage: /logo.jpg
heroText: 你的標題
tagline: 你的副標題
lang: en-US
actionText: 開始開發 →
actionLink: /groupA/
features:
- title: 吹