VuePress介绍及使用
VuePress简介
VuePress是Vue 驱动的静态网站生成器。
主要特点：
（1）简洁至上
以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
（2）Vue 驱动
享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
（3）高性能
VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
VuePress官网地址：
https://vuepress.vuejs.org/zh/guide/
官方主题地址：
https://github.com/vuepress/awesome-vuepress/blob/main/v1.md
VuePress快速上手
VuePress快速上手步骤：
//创建并进入目录
mkdir vuepress-starter && cd vuepress-starter
//项目初始化
yarn init 或 npm init
//安装VuePress为本地依赖
yarn add -D vuepress 或 npm install -D vuepress
//创建文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
//package.json新增scripts配置
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
// 启动服务器
yarn docs:dev
启动完之后，访问http://localhost:8080地址，即可查看自己的第一个VuePress文档，如下图示：
vuepress-01.pngVuePress快速上手地址：
https://v1.vuepress.vuejs.org/zh/guide/getting-started.html
VuePress配置
VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
目录说明：
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。
为了更好地自定义你的网站，首先在docs目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
主题配置
一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage）等。
首页
---
home: true
heroImage: /hero.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
---
富文本 footer
你还可以使用 Markdown Slot Syntax 来设置 footer，以支持富文本：
---
home: true
---
::: slot footer
MIT Licensed | Copyright © 2018-present [Evan You](https://github.com/yyx990803)
:::
导航栏链接
你可以通过 themeConfig.nav 增加一些导航栏链接:
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
]
}
}
侧边栏
想要使 侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
默认主题配置详见：
https://vuepress.vuejs.org/zh/theme/default-theme-config.html
VuePress基础工程
vuepress-starter为引入VuePress依赖，VuePress文档的基础工程，页面效果如下图所示：
VuePress基础工程-首页
VuePress基础工程-指南可下载vuepress-starter基础工程，基于基础工程快速开发自己的技术文档。
基础工程gitee地址：
https://gitee.com/whwtree/vuepress-starter.git
（完）