在做前端团队建设过程中,相关文档越来越多,所以迫切需要有一个地方来存储这些文档。在对比了几个框架之后,最终选择了使用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、如何创建一个下图这样的目录树
如有其他使用问题,欢迎留言交流。