// .vuepress/enhanceApp.js // 全局注册 Element 组件库 import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' export default ({ Vue, options, router }) => { Vue.use(Element) }
在 Vue 正常开发中，有些时候我们可能会需要做一些自定义的组件，在 VuePress 中我们可以在 .vuepress/components 目录中编写我们的自定义组件，VuePress 在编译时遍历该目录中所有的 *.vue 文件，并见它们注册为全局组件。
// 注册一个自定义组件 // docs/.vuepress/components/hello.vue <template> <div>Hello VuePress Demo</div> </template>
这样我们在 Markdown 文件编写 Vue 代码的时候就不需要注册注册这些组件，边可以直接在 Markdown 中使用了。
// docs/.vuepress/vue/README.md <template> <div> {{ 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。