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

經過vue組件實現跟：Element類似的效果。須要在VuePress網站中將本身的項目中的Vue組件運行結果展現在頁面中。
至於如何將組件在VuePress網站中展現請參考：http://www.javashuo.com/article/p-mgimzdup-w.html

當項目中的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