Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客
VuePress
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。
一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。
上手搭建
你可以跟着文档上的例子自己玩一玩，不过由于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文档：
下面的工作就是数据的替换了，但我们应该先看一下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 © 2018-present Evan You // 页尾
实在看不懂，官网有比我更详细的配置说明。
导航配置
导航配置文件在.vuepress/config.js中
在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Config Reference',
link: '/config/'
},
{
text: 'Default Theme Config',
link: '/default-theme-config/'
}
]
剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。
更改默认主题色
你可以在.vuepress/目录下创建一个override.styl文件。
vuepress提供四个可更改的颜色：
$accentColor = #3eaf7c // 主题色 $textColor = #2c3e50 // 文字颜色 $borderColor = #eaecef // 边框颜色 $codeBgColor = #282c34 // 代码背景颜色
我把它改成了这样：
侧边栏的实现
由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。
侧边栏的配置也在.vuepress/config.js中：
sidebar: [
{
title: 'JavaScript', // 侧边栏名称
collapsable: true, // 可折叠
children: [
'/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
]
},
{
title: 'CSS',
collapsable: true,
children: [
'/blog/CSS/搞懂Z-index的所有细节',
]
},
{
title: 'HTTP',
collapsable: true,
children: [
'/blog/HTTP/认识HTTP-Cookie和Session篇',
]
},
]
对应的文档结构：
├─blog // docs目录下新建一个博客目录 │ ├─CSS │ ├─HTTP │ └─JavaScript
我的博客：brownhu
部署
在配置好你博客之后，命令行执行：
Vuepress build
当你看到这一行就说明成功了：
Success! Generated static files in vuepress.
将打包好的vuepress目录上传到你的github仓库，和github page配合，就可以配置好你的博客网站了。
相关文章
Vue使用mounted和created时,this无法指向data中的数据问题
这篇文章主要介绍了Vue使用mounted和created时,this无法指向data中的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
因产品需求和UI样式调整，本文主要实现elementUI下拉选项加多选框的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
不知道你有没有发现Bing AI聊天有个输入提示功能,在用户输入部分内容时后面会给出灰色提示文案,用户只要按下tab键就可以快速添加提示的后续内容,我将这个功能称为幽灵建议,接下来我将用Vue框架来实现这个功能,需要的朋友可以参考下2023-09-09
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下2017-08-08
这篇文章主要介绍了Vue 中使用lodash对事件进行防抖和节流操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下2018-11-11
这篇文章主要为大家详细介绍了Vue.js数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
下面小编就为大家分享一篇Vue用v-for给src属性赋值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在Vue应用中,表单验证是非常重要的一部分,Vue提供了一些内置的验证规则,比如required、min、max等,但是有时候我们需要对表单进行自定义验证,以满足特定的业务需求,本文将介绍如何在Vue中进行表单自定义验证,感兴趣的朋友可以参考下2023-12-12
今天小编就为大家带来一篇axios取消请求的实践记录分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论