.vuepress/components 目录中编写我们的自定义组件，VuePress 在编译时遍历该目录中所有的
*.vue 文件，并见它们注册为全局组件。
// 注册一个自定义组件
// docs/.vuepress/components/hello.vue
<template>
<div class="cpt-hello">Hello VuePress Demo</div>
</template>
这样我们在 Markdown 文件编写 Vue 代码的时候就不需要注册注册这些组件，边可以直接在 Markdown 中使用了。
// docs/.vuepress/vue/README.md
<template>
<div class="test-demo">
{{ msg }}
<my-hello></my-hello>
<el-button>button</el-button>
</div>
</template><script>
export default {
data () {
return {
msg: 'Hello VuePress!'
}
}
}
</script>
部署到 Github pages
当我们将文档写好后就到了我们最关心的地方了，怎么将打包后的代码推送到远程仓库的 gh-pages 分支上，网上应该有很多文章描述怎么做，但是很多方法比较麻烦，还好有工具已经为我们解决了这个麻烦了。
// 1.下载 gh-pages 包
npm install -D gh-pages// 2. 在 package.json 文件上添加脚本命令
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
// 上面我修改了 VuePress 的输出目录，所以您如果没有修改 .vuepress/config.js
// 的 dest 属性，应该将这里的 dist 改为 .vuepress/dist
"deploy": "gh-pages -d dist",
"deploy:build": "npm run docs:build && gh-pages -d dist"
}
// 3. 打包并推送到 gh-pages 分支
npm run deploy:build
// 4.打开你的 Github pages, 地址是 https://<yourname>/github.io/<repo>
总结
相比较 Hexo 而言 VuePress 上手更加容易，功能也更强大，例如在 VuePress 可以注册自定义组件，而且 VuePress 中编写 Vue 和平时一样学习成本几乎为零。所以如果您正在开源一款 Vue 相关的库或是其他项目，您都可以使用 VuePress 作为您的文档编辑工具。虽然并没有完全将 VuePress 内容讲完，学完该篇文章相信你可以对 VuePress 有个大概的了解，您至少可以快速搭建一个博客，如果您想对 VuePress 有更多了解，请参考Vuepress 中文 API。
