通過VuePress管理項目文檔(二)

通過vue組件實現跟：Element相似的效果。需要在VuePress網站中將自己的項目中的Vue組件運行結果展示在頁面中。
至於如何將組件在VuePress網站中展示請參考：https://segmentfault.com/a/1190000017242116

當項目中的Vue組件的運行結果可以在頁面展示以後，接下來就是要將自己的代碼展示在Vuepress網站中。

在VuePress網站中展示自己的代碼

因爲可以在markdown中使用Vue組件，所以可以自己專門寫一個Vue組件來寫一個效果跟：Element相似的頁面。

在進行下一步之前先運行兩名兩個命令：
yarn add vue-highlight.js
yarn add highlight.js

因要在組件中使用這兩個包，所以需要做一些配置，在docs\.vuepress下添加enhanceApp.js文件，將下面代碼加進去

import  VueHighlightJS  from  'vue-highlight.js';
import  'highlight.js/styles/dark.css';
export  default ({
    Vue, 
}) => {
    Vue.use(VueHighlightJS)
}

接下來就是寫Vue組件，用來實現自己項目組件和代碼的展示效果，也就是項目文檔的佈局和樣式。
由於代碼比較多，這裏就不放代碼了，可以從這裏下載這次案例的所有代碼GitHub

效果圖

到了這一步，大部分功能基本上都實現了。

自定義樣式

在docs\.vuepress下添加override.styl,通過編輯override.styl文件可以更改VuePress默認樣式。
如果需要對頁面的樣式進行修改，只需要在override.styl在這個.theme-container.custom-page-class{}裏面對頁面中對應的類進行修改就可以修改頁面默認樣式。例子如下:

.theme-container.custom-page-class {
    /* 特定頁面的 CSS */
    /*.sidebar在頁面中是側邊欄的類名，通過這個可以修改側邊欄的樣式和佈局*/
    .sidebar{
        width: 16rem;
    }
    @media(max-width:  959px){
        .sidebar{
            width: 15rem;
        }
    }
}

寫好這個以後，在需要修改默認樣式的頁面中將這個文件引入使用，使用方法如下：
在對應的頁面的markdown文件中添加pageClass: custom-page-class，custom-page-class這個得跟override.styl文件中.theme-container.custom-page-class的一樣。
在icon.md文件的開頭添加：

---
pageClass: custom-page-class
---

這樣就可以修改icon這個頁面的默認樣式

需要注意的是在markdown使用組件，需要用<ClientOnly></ClientOnly>將組件包裹起來，否則會報錯。如：

<ClientOnly>
  <Icon-vi-icon/>
</ClientOnly>

本次案例代碼:GitHub