## VuePress 简介

VuePress 由两部分组成：第一部分是一个[极简静态网站生成器](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/core)，它包含由 Vue 驱动的[主题系统](https://vuepress.vuejs.org/zh/theme/)和[插件 API](https://vuepress.vuejs.org/zh/plugin/)，另一个部分是为书写技术文档而优化的[默认主题](https://vuepress.vuejs.org/zh/theme/default-theme-config.html)，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

### 快速上手

```shell
#初始化
npm init -y

#本地安装VuePress
npm install -D vuepress
```

### 构建项目结构

VuePress 遵循 **“约定优于配置”** 的原则。

> ```yaml
> .
> ├── docs
> │   ├── .vuepress (可选的)：用于存放全局的配置、组件、静态资源等。
> │   │   ├── components (可选的)：该目录中的 Vue 组件将会被自动注册为全局组件。
> │   │   ├── theme (可选的)：用于存放本地主题。
> │   │   │   └── Layout.vue
> │   │   ├── public (可选的)：静态资源目录。
> │   │   ├── styles (可选的)：用于存放样式相关的文件。
> │   │   │   ├── index.styl
> │   │   │   └── palette.styl
> │   │   ├── templates (可选的, 谨慎配置)：存储 HTML 模板文件。
> │   │   │   ├── dev.html
> │   │   │   └── ssr.html
> │   │   ├── config.js (可选的)： 配置文件的入口文件，也可以是 YML 或 toml。
> │   │   └── enhanceApp.js (可选的)：客户端应用的增强。
> │   │ 
> │   ├── README.md
> │   ├── guide
> │   │   └── README.md
> │   └── config.md
> │ 
> └── package.json
> ```

配置 `package.json`，用于启动和编译项目：

```json
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
# 项目文件都基于docs目录
```

把`docs`目录作为targetDir，下面所有的“文件的相对路径”都是相对于 `docs` 目录的。

| 文件的相对路径     | 页面路由地址   |
| ------------------ | -------------- |
| `/README.md`       | `/`            |
| `/guide/README.md` | `/guide/`      |
| `/config.md`       | `/config.html` |







### [vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/)主题的使用

```shell
#安装
npm install vuepress-theme-reco --save-dev
```

```json
#引用
module.exports = {
    theme: 'reco'
}
```

**分类和标签**

config.js配置

```json
module.exports = {
  theme: 'reco',
  themeConfig: {
     // 博客配置
    blogConfig: {
      category: {
        location: 2,     // 在导航栏菜单中所占的位置，默认2
        text: 'Category' // 默认文案 “分类”
      },
      tag: {
        location: 3,     // 在导航栏菜单中所占的位置，默认3
        text: 'Tag'      // 默认文案 “标签”
      }
    }
  }
}
```

文章头部添加分类和标签等信息

```yaml
---
title: Postgresql 备份方式
date: 2020-10-10
author: ac
tags: 
	- postgresql
categories: 数据库
---
```