需求是写一个系统的操作手册，只需要标题描述和图片，重要的需要左侧的导航，如果写静态页面的话需要写很多样式，就想用写那种开源文档的风格来写，后来了解到了Docsify，因为它更适合小白。
安装
npm i docsify-cli -g
开始
因为是在vue原有的项目上加入的使用手册，所以我没用官方的初始化项目，而是在public项目下直接新建一个文件夹doc，然后再创建一个index.html文件作为入口文件。这个运行项目后可以直接访问。
- index.html文件如下：
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="//fastly.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"
/>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
// 配置左侧文档名称
name: "后台管理系统使用手册",
loadSidebar: true,
};
</script>
<script src="//fastly.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>
创建README.md就是主页面显示的内容
### 技术文档开始的地方
***
创建侧边栏
需要创建自己的_sidebar.md，和index.html同级目录，并且在index.html中配置
<!-- index.html -->
<script>
window.$docsify = { loadSidebar: true }
</script>
内容如下：
* [日常办公](demo/daily)
+ 请假
* [项目管理](demo/guide)
+ 项目1
+ 项目2
链接的也是mardown文件，在doc的目录下创建demo文件夹，并且创建两个.md文件测试链接 结构如下
guide.md内容如下：
### 这里是测试
***
> 文字引用
> 文字引用
> 文字引用
> 文字引用
> 文字引用
整体效果如下：
