vuepress是一个静态网站生成器，由vue驱动的主题系统和api，支持markdown语法，可以利用开发属于自己的技术博客或技术文档。
官网：https://www.vuepress.cn
下载安装vuepress
1.下载vuepress
全局安装（没尝试过）
npm install -g vuepress
本地安装
npm install -D vuepress
2.初始化package.json文件
npm init
3.在package.json文件添加命令
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
运行vuepress
1.根目录创建docs文件夹（总的目录，存放配置和文件，所有的文件的相对路径都是根据这个文件夹来的。）
2.docs文件夹创建一个README.md文件（配置首页），使用markdown语法。
-
npm run dev启动，npm run build,打包。
注意可能出现无法启动的情况，切换node版本尝试，（12.16.0）
默认主题首页配置
- 主题的首页配置在根目录(
docs)的README.md文件中进行设置。 - 首页展示的
heroImage路径在.vuepress里面的public文件夹中，直接将图片放里面就好了。
vuepress的文件夹名称都是设置好的，不要篡改。
---
home: true //是否使用Vuepress默认主题
heroImage: /logo.png //默认首页图片
heroText: Hero 标题 //默认首页标题
tagline: Hero 副标题 //默认首页副标题
actionText: 快速上手 → //默认首页按钮文字
actionLink: /zh/guide/ //点击按钮跳转的目录
features: //默认三个区域显示内容
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You //底部文字
---
导航栏配置
- 导航栏的配置，需要在
.vuepress文件夹中的config.js（配置文件的入口文件）中进行配置。 - 在
nav中配置顶部导航，text设置导航标题，link设置点击跳转的链接，items设置下拉的子菜单。 - 在
sidebar中设置侧边导航，侧边导航有两种，一种是每一个顶部导航都有一个侧边导航与之对应，还有一种就是所有的顶部导航共用一个侧边栏导航。
module.exports={
title:"xukeler的博客", //网站标题
description:"这是一个关于技术分享的博客", //网站描述
base："/", //部署路径，如果部署在服务器根目录就不用设置
themeConfig: { //主题设置
logo: '/logo.png', //导航logo
sidebarDepth:2,
nav: [ //顶部导航
{ text: '首页', link: '/' },
{ text: '前端开发', link: '/blog/web/' },
{ text: '后端开发', link: '/blog/server/' },
{ text: '爱好', link: '/blog/interest/' },
{
text: '其它',
link: '/blog/other/' ,
items: [
{ text: 'Group1', link:"/" },
{ text: 'Group2', link:"/" }
]},
],
sidebar:[ //侧边导航
{ //侧边栏分组
title: 'Vue',
collapsable: true,
sidebarDepth:2,
children: [
['/blog/web/vue',"vue" ],
['/blog/web/vue通信',"vue通信"]
]
}
]
},
}
多个侧边栏的配置
