通过VuePress管理项目文档(二)

1

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

效果图

4.png

5.png

到了这一步,大部分功能基本上都实现了。

自定义样式

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-classcustom-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

你可能感兴趣的

小伙儿 · 4月20日

我按照文档步骤安装好了vue-highlight.js、highlight.js,程序跑起来就报错:Error: Unknown language: "vue",我反复对比了代码没始终没发现问题在哪里。

回复

0

vue第一个字母是大写Vue。你可以下载代码下来对比看

qfstudy 作者 · 4月21日
0

@qfstudy 额,通过不断对比终于发现原因了,是vue-highlight.js的问题,最新的3.1.0有bug吧,会报Unkown language:'vue'错误,我把版本改成和你一样的2.2.0就能跑起来了

小伙儿 · 4月21日
载入中...