VuePress 搭建开发文档

vuepress官网：https://vuepress.vuejs.org/zh/guide/getting-started.html
目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (配置文件的入口文件)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json

基本配置【.vuepress/config.js】

网站的标题，描述信息配置

module.exports = {title: 'Hello VuePress',  // 网站标题description: 'Just playing around' // 网站描述
}

导航栏配置

module.exports = {.................themeConfig: {nav: [{ text: 'Home', link: '/' },{ text: 'foo', link: '/foo/' },]}
}

在 docs 目录下新建 foo 文件夹，在foo 文件夹内新建 README.md 文件，否则点击 foo 页面会展示 404

3) 侧边栏

 module.exports = {..................themeConfig: { ................sidebar: { // 侧边栏配置'/foo/': [['fooOne', '哈哈'],['fooTwo', '嘿嘿']]}}};

在 foo 文件夹下新建fooOne.md、fooTwo.md 文件

4）动态生成导航栏、侧边栏

4.1 新建 .vuepress/utils/nav-sidebar-auto.js 文件

const fs = require('fs');
const path = require('path');
const resolvePath = (dir) => path.resolve(__dirname, dir);
const dir = resolvePath('../../pages');  // 获取 pages 文件夹绝对路径 const nav = []; // 导航栏
const sidebar = {}; // 侧边栏// 动态生成导航栏
function createNav() {const  pages_folders = fs.readdirSync(dir);  // 读取 pages 下面所有的文件夹pages_folders.forEach(folder => { // 遍历文件夹const folder_Path = path.join(dir, folder); // 获取 pages 下文件夹绝对路径，eg: /xxx/.../pages/01_barconst folderInfo = fs.statSync(folder_Path); // 获取文件夹相关信息// 排除mac 文件：.DS_Storeif(folderInfo.isDirectory && folder !== '.DS_Store') {const files = fs.readdirSync(folder_Path); // 获取文件夹下面所有文件名const text = folder.split('_')[1];const link = `/pages/${folder}/`;// 默认文件夹下第一个文件作为跳转nav.push({ text, link: link });sidebar[link] = createSideBar(files);}});console.log(nav);console.log(sidebar);
}// 动态生成侧边栏
function createSideBar(files, pages = []) {files.forEach( file => {if (/\.md$/i.test(file) && file !== 'README.md') {// const name = file.slice(0, -3);pages.push(name);}});return pages;
}createNav();module.exports = { nav, sidebar };

4.2 在 config.js 文件中引用

const { nav, sidebar } = require('./utils/nav-sidebar-auto.js');
module.exports = {title: '前端代码规范',description: '前端代码规范文档',themeConfig: {nav,sidebar}};

4.3 新建 pages 文件夹，文件夹内放几个.md 的测试文件

备注： 1.侧边栏取.md 文件内 title 的值
2. .md 文件内不能有错误语法，否则侧边栏显示路径

默认主题配置

 主题负责整个网站的布局和交互细节,默认主题提供了一些选项，可以自定义首页、导航栏、 侧边栏【[默认主题](https://vuepress.vuejs.org/zh/theme/default-theme-config.html)】

配置文件： docs/README.md

# 首页配置
---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

markdown 语法
一、首行缩进
后面加2个空格,表示换行
　　mac opion + 空格即可首航缩进, 对 ## 该方法无效

VuePress 搭建开发文档相关推荐

.NET6使用DOCFX根据注释自动生成开发文档
本文内容来自我写的开源电子书<WoW C#>,现在正在编写中,可以去WOW-Csharp/学习路径总结.md at master · sogeisetsu/WOW-Csharp (gith ...
开发文档怎么编写_PoC 编写指南
什么是 PoC PoC(全称: Proof of Concept), 中文译作概念验证.在安全界,你可以理解成为漏洞验证程序.和一些应用程序相比,PoC 是一段不完整的程序,仅仅是为了证明提出者的观点 ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
腾讯企业邮箱开发（非官方开发文档方式
** 之前项目系统中包含了一个邮箱下载模块,其中对接的是腾讯企业邮箱,这个模块前后也维护了不短时间,想写下这篇文章来聊聊具体问题,如果有需要对接腾讯企业邮箱的需求,同时官方给予的开发文档无法满足需求, ...
苹果CMS完全开发文档 - 苹果CMS手册 - 苹果CMS教程 - 苹果CMS帮助 - 苹果cmsV10
苹果CMS完全开发文档 - 苹果CMS手册 - 苹果CMS教程 - 苹果CMS帮助 - 苹果cmsV10 MacCms V10.x 程序介绍苹果CMS能做什么? 传送门 MacCms V10.x 下 ...
M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档
M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档分布式基础篇一.环境搭建各种开发软件的安装虚拟机: docker,mysql,redis 主机: Maven, idea(后端),Vs ...
社区疫情管理信息系统开发文档
此为大三小组课程作业,基于社区疫情的管理信息系统的开发文档,此为记录. 1.系统概述 1.1项目背景本小组设计的社区疫情管理系统是计算机技术与疫情管理相结合的产物,通过使用社区疫情管理系统,可以实现 ...
基于海康SDK开发文档分析+云台控制实现+经典案例
基于海康SDK开发文档分析+云台控制实现+经典案例上一篇:海康威视java开发+demo运行+调用dll动态库坑一.准备海康的SDK下载 https://www.hikvision.com/cn ...

VuePress 搭建开发文档

VuePress 搭建开发文档相关推荐

最新文章

热门文章