122 lines
3.4 KiB
Markdown
122 lines
3.4 KiB
Markdown
## 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: 数据库
|
||
---
|
||
```
|
||
|