VuePress做出个人网页

这次给大家带来VuePress做出个人网页，VuePress做个人网页的注意事项有哪些，下面就是实战案例，一起来看一下。

VuePress

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。

一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。

这是VuePress的官方文档

上手搭建

你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。

1.首先安装VuePress到全局

npm install -g vuepress

2.然后把VuePress仓库克隆到你的电脑

git clone git@github.com:docschina/vuepress.git

在docs文件中执行（请确保你的 Node.js 版本 >= 8）cd vuepresscd docsvuepress dev当你看到这一行就说明已经成功了： VuePress dev server listening at http://localhost:8080/下面我们打开http://localhost:8080/

发现真的打开了vuepress文档：

下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：├─.vuepress│ ├─components│ └─public│ └─icons│ └─config.js // 配置文件├─config // Vuepress文档的配置参考内容├─default-theme-config // Vuepress文档的默认主题配置内容├─guide // Vuepress文档的指南内容└─zh // 中文文档目录 ├─config ├─default-theme-config └─guide└─README.md // 首页配置文件文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。

其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。

首页配置

默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。

我们先看看根目录下的README,md：home: true // 是否使用Vuepress默认主题heroImage: /hero.png // 首页的图片actionText: Get Started → // 按钮的文字actionLink: /guide/ // 按钮跳转的目录features: // 首页三个特性- title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing.- title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.- title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.footer: MIT Licensed | Copyright