团队文档在线管理,非常实用的vuepress

在做前端团队建设过程中,相关文档越来越多,所以迫切需要有一个地方来存储这些文档。在对比了几个框架之后,最终选择了使用vuepress构建静态资源网站。
优点:
1、vue系,大家比较熟悉
2、界面优美,直接使用vue官网一样的风格。
3、文档基于markDown,可移植。
准备:
1、请基于vuepress中文文档,完成项目安装和构建,地址:https://vuepress.vuejs.org/zh/guide/getting-started.html
2、本篇文章只会把自己认为的几个核心模块拿出来和大家分享下:
核心模块:
1、目录结构
团队文档在线管理,非常实用的vuepress

2、config.js文件配置:

const path = require('path');
module.exports = {
  base:'/',// 仓库名,表示部署到哪里
  title: 'DataHub前端文档',// 网页左上角标题名,也是主页标题
  description: '基于Vue Press的前端研发文档,前端编码规范文档', // 描述,是主页副标题
  head: [
    ['link', { rel: 'icon', href: '/img/logo.png' }]
  ],// 引入标签页小图标 应该是个.ico
  themeConfig: {
    // repo: 'xxxx',// 默认是 false, 设置为 true 来启用,右上角会出现 github 跳转链接
    logo: '/img/logo.png',
    lastUpdated: 'Last Updated', // 每个文档展示最近更新时间
    // displayAllHeaders: true, // 显示所有页面的标题链接
    nav: [
      { text: '首页', link: '/' },
      { text: '编码规范', link: '/coding/' },// 根路径指docs目录,guide后面加一个 / 表示guide是一个目录,会自动读取其下的 CORE 2 文件展示到页面
      { text: '设计文档', link: '/design/' },
      { text: '调研结论', link: '/result/' },
      { text: '团队分享', link: '/share/' },
      { text: '规章制度', link: '/rules/' },
      // 显示下拉列表
      // {
      //   text: 'Languages',
      //   items: [
      //     { text: 'Chinese', link: '/language/chinese' },
      //     { text: 'Japanese', link: '/language/japanese' }
      //   ]
      // },
      // 下拉列表显示分组
      // {
      //   text: '高级',
      //   items: [
      //     { 
      //       text: '算法', 
      //       items: [
      //         { text: '冒泡', link: '/language/chinese' },
      //         { text: '快速', link: '/language/japanese' }
      //       ] 
      //     },
      //     { 
      //       text: '设计模式', 
      //       items: [
      //         { text: '工厂', link: '/language/chinese' },
      //         { text: '单例', link: '/language/chinese'},
      //       ] 
      //     },
      //   ]
      // }
    ],
    sidebar: {
      '/coding/': [
        '',
        'name',
        'css',
        'cssmanage',
        'html',
        'htmlmanage',
        'javascript',
        'javascriptnext',
        'ui',
      ],
      '/design/': [
        '',
        '通用文本设计文档',
        '会议纪要设计文档',
        '调研任务设计文档',
        '数理化批改评分设计文档'
      ],
      '/result/': [
        '',
        'XXX调研结论',
      ],
      '/share/': [ 
        ''
      ],
      '/rules/': [
        '',
        'codeRule',
        'shareRule',
        'shareRecord',
        'branchManage'
      ],
      // 确保'/'侧边栏被最后定义。VuePress 会按顺序遍历侧边栏配置来寻找匹配的配置。
      '/': [
        '',
      ],
    },
    // sidebar: 'auto',
    // sidebarDepth: 2,//注:如果设置了 sidebar: 'auto' ,侧边栏会显示h2和h3标题,此时sidebarDepth的值只有0是生效的(仅显示h2的标题),这里需要注意一下。
    // scss:{
    //   includePaths: [path.join(__dirname, '../../styles')]
    // },
    markdown: { // markdown 插入代码时展示对应行数
      lineNumbers: true
    },
    // configureWebpack: {
    //   resolve: {
    //     alias: {
    //       '@img': path.join(__dirname, './public/img'),
    //     }
    //   }
    // }
  },
}

2、公共图片加载
团队文档在线管理,非常实用的vuepress
公共图片存放在.vuepress/public文件夹,在.md文档中直接相对根路径目录引用。
团队文档在线管理,非常实用的vuepress
3、相对图片资源加载
团队文档在线管理,非常实用的vuepress
团队文档在线管理,非常实用的vuepress
4、如何创建一个下图这样的目录树
团队文档在线管理,非常实用的vuepress
团队文档在线管理,非常实用的vuepress
团队文档在线管理,非常实用的vuepress
如有其他使用问题,欢迎留言交流。

上一篇:Go开发之VScode安装


下一篇:作业11:元祖及元祖的嵌套