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

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

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/public文件夹，在.md文档中直接相对根路径目录引用。

3、相对图片资源加载


4、如何创建一个下图这样的目录树



如有其他使用问题，欢迎留言交流。

标签：在线,language,text,link,vuepress,文档,chinese
来源： https://blog.csdn.net/biraotian/article/details/116762702