成果展示
Vuepress文档
https://v0.vuepress.vuejs.org/zh/
文档的应用
Vuepress的功能比较强大可用用作文档也可以制作博客，本文主要讲解我对文档的理解的实践及踩坑。
安装依赖
全局
yarn global add vuepress # 或者：npm install -g vuepress 新建一个 markdown 文件 echo '# Hello VuePress!' > README.md 开始写作 vuepress dev . 构建静态文件 vuepress build .
局部
npm install vuepress --save-dev或者yarn add vuepress -D
然后在package.json文件中设置
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
必须的项目结构:项目名>docs
vuepress比较强大，我主要用来写文档。由于第一次接触markdown语法，有些比较新奇。
主要用到了使用了 生成导航，生成侧边栏。在生成侧边栏遇到了点问题。
目录结构为
侧边栏
侧边栏分组
通过.vuepress/config.js中 themeConfig. sidebar 来配置左边侧边栏。这里我用到了侧边栏分组。
sidebar: [{
title: "pc模块",
collapsable: true,
children: [
'/pc/',
'/pc/test',
]
}, {
title: "moblie模块",
collapsable: true,
children: [
'/mobile/',
'/mobile/one',
'/mobile/two',
]
}]
但是这样，还是生成不了侧边栏，通过设置themeConfig. displayAllHeaders 后才显示
displayAllHeaders: true, // 侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接：
文档地址：
https://v0.vuepress.vuejs.org/zh/default-theme-config/#%E4%BE%A7%E8%BE%B9%E6%A0%8F
最后附上config.js文件
module.exports = {
title: '网站标题',
description: '网站描述',
host: '192.168.31.66',
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', {
rel: 'icon',
href: '/favicon.ico'
}], // 增加一个自定义的 favicon(网页标签的图标)
],
base: '/',
markdown: {
lineNumbers: true // 代码块显示行号
},
// 导航
themeConfig: {
repo: 'akbq2008/Components',
// 将会自动在每个页面的导航栏生成生成一个 GitHub 链接，以及在页面的底部生成一个 "Edit this page" 链接。
repoLabel: '查看源码',
editLinks: true,
// 默认为 "Edit this page"
editLinkText: '帮助我们改善此页面！',
serviceWorker: {
updatePopup: true,
//将开启一个能够刷新内容的弹窗。当网站更新（即 Service Worker 更新）时，它会提供一个 refresh 按钮，允许用户立刻刷新内容。
// 如果设置为 true, 默认的文本配置将是:
updatePopup: {
message: "有新的资源可用",
buttonText: "点击刷新"
}
},
lastUpdated: 'Last Updated', //最后更新时间
displayAllHeaders: true,
// 侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接：
sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
lastUpdated: 'Last Updated', // 文档更新时间：每个文件git最后提交的时间
nav: [ // 内部链接 以docs为根目录
{
text: '我的博客',
link: 'https://www.suanliutudousi.com/'
}, // 外部链接
// 下拉列表
{
text: 'GitHub',
items: [{
text: 'GitHub地址',
link: 'https://github.com/akbq2008'
}
]
}
],
sidebar: [{
title: "pc模块",
collapsable: true,
children: [
'/pc/',
'/pc/test',
]
}, {
title: "moblie模块",
collapsable: true,
children: [
'/mobile/',
'/mobile/one',
'/mobile/two',
]
}]
}
}
自动生成侧边栏
将themeConfig.sidebar设置为auto即可。
可以参考 :
配置alias
const path=require('path');
configureWebpack: {
resolve: {
alias: {
'@images': path.resolve(__dirname,'images')
}
}
}
使用本地图片
更新于2019/12/1
