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

效果图

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


study
学习笔记
149 声望
4 粉丝
0 条评论
推荐阅读
一行一行手敲webpack4配置
代码:github 一、webpack4--基本配置 1.初始化配置 {代码...} 目录结构 {代码...} 安装webpack npm install webpack --save-dev 安装指定版本webapck npm install --save-dev webpack@&lt;version&gt; webpack 4...

qfstudy3阅读 1.7k

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.1k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

149 声望
4 粉丝
宣传栏