VuePress 新手搭建教程

1 什么是VuePress？

vuePress是以vue驱动的主题系统的简约静态网站生成工具

2 如何搭建？

在官方网址上说的其实很清楚的，这边简要的说一下

2.1 利用npm 安装 vuepress

# 初始化 npm
npm init -y

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

在网址上输入127.0.0.1:8080，如下图所示:

恭喜你已经离成功有更近了一步。

2.2 创建目录结构

官方推荐的结果如下所示：

由于本文章不涉及客户端应用的增强。
因此创建的目录如下图所示：

各个目录的说明如下所示:

其默认的路由如下图所示：

2.3 利用默认主题搭建个人博客（重点终于来啦！）

2.3.1 首页的搭建

这里利用官方提供的默认主题的模板，在docs/README.md的代码如下所示:

---
home: true  
heroImage: img/hero.png
actionText: 快速上手 →
actionLink: /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
---
<!--默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。
想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。  -->

在docs/.vuepress/config.js的代码如下所示:

module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around'
}

查看127.0.0.1:8080，如下所示：

恭喜你！首页已经搭建成功了！

3 进阶

由于本章偏长有限，这边不过多说明。详细请看官方文档

最后，这里附带markdown常用的语法：