【可视化文档】vuepress快速搭建实时预览文档站点

903 阅读1分钟

背景

随着项目业务逐渐积累,一些公共组件和公共方法也越来越多,搭建在线预览的文档可以实时查看.

目标:

  1. 防止重复造轮子
  2. 提升开发效率
  3. 标准规范化

解决方案

vuepress:vue官方提供的开源文档方案 官网链接

快速上手

    mkdir vuepress
    cd vuepress
    npm init
    npm install -D vuepress

目录结构

具体说明: .vuepress目录

  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件,具有比默认样式更高的优先级
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。

guide为md格式的文档文件

  • instruction为文档目录

README.md 为默认首页

文档提交说明

如果新增菜单项,需要再config.js 中进行配置,保持文件名一致即可

比如使用文档菜单新增登录页面,需要如下操作:

  1. 在使用文档的children中增加 'instruction/login' 配置
  2. 在instruction目录中,新增login.md文件

导出pdf

如果想导出pdf,可以安装插件vuepress-plugin-export 执行:vuepress export docs即可 ,导出pdf插

完整可运行demo已放github