VuePress做出个人页面

微信（WeChat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，由张小龙所带领的腾讯广州研发中心产品团队打造 [2] 。微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。

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

VuePress

VuePress做出个人网页

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

VuePress做出个人网页

一个基于 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 vuepress
cd docs
vuepress dev

VuePress dev server listening at http://localhost:8080/

下面我们打开http://localhost:8080/

发现真的打开了vuepress文档：

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   关键词：VuePress做出个人页面