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