vuepress 是一款可以用在项目中进行文档开发的工具,它高效、便捷。在使用过程中,有以下心得记录下,以便后期查阅,
1、markdown 要熟悉。
在整个开发中,文字性的编写全靠使用markdown工具。它既可以用文档中的标题生成侧边栏的导航索引,又可以将vue与markdown结合起来,渲染出所需求的东西。
2、侧边栏生成
// 生成侧边栏导航的索引的因素一部分取决于在docs/.vuepress/config文件sidebar和sidebarDepth的配置
module.exports = {
title:"11", // 标题
description: "11", // 描述
base:'/docsViews/',
head: [
['link', { rel: 'icon', href: '/img/logo.ico' }],
['link', { rel: 'manifest', href: '/manifest.json' }],
], // 额外需要注入到当前页面的标签
themeConfig: {
nav: [
{ text: '主页', link: '/' },
{ text: '关于', link: '/about/' },
{ text: 'Github', link: 'https://www.github.com' },
],
sidebar: 'auto',
sidebarDepth: 2,
lastUpdated: 'Last Updated',
},
}
sidebar具体的配置方法,可参见官方文档;想要根据文档中的标题级别自动生成侧边栏,有两种方法:
//1、在.md文档顶部标注:
---
sidebar: auto
---
// 2、在config文件中的themeConfig中配置
module.export = {
...
themeConfig: {
sidebar:auto;
}
}
sidebarDepth设置的值表示侧边栏生成索引嵌套层级。侧边栏显示从H2开始,最多显示到H3,因此,sidebarDepth可选值有:
0:禁用标题(header)链接
1:默认值,表示只显示H2的标题
2:最大值,同时提取H2和H3的标题值
3、配置链接是,READEME.md文件时,不用写READEME的名称,只需要写到它所在的目录即可,但是其他不叫READEME的文档,需要写对应的文件名称
// 1、 docs/myword/READEME.md 写成 '/myword/'
// 2、docs/myword/First.md 写成 '/myword/First/'
4、vuepress中tip warning danger 和 markdown中的块引用,两个看起来只是颜色背景不同,但是在使用的写法上是不一样的。
5、