经过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