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

2021-05-13 19:57:29 阅读：316 来源： 互联网

标签：在线 language text link vuepress 文档 chinese

在做前端团队建设过程中，相关文档越来越多，所以迫切需要有一个地方来存储这些文档。在对比了几个框架之后，最终选择了使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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