还在烦恼怎么做一个简单又美观的文档或博客网站吗？VuePress，让你十分钟就能搭建一个静态网站！

简介

VuePress，是 vuejs 在 Github 上开源的静态网站生成器，项目仓库位于 https://github.com/vuejs/vuepress，目前版本为 v1.5.0。VuePress 结合了 Markdown 语法和 Vue.js，可以从 Markdown 文档中直接生成一个静态网站，且可以结合 Vue.js，实现更为美观和强大的自定义主题和功能，满足快速构建如文档和技术博客网站等静态网站。相比于其他项目，VuePress 开箱即用，依赖较少，对 SEO 友好，能有效利用 Vue 处理布局和交互，渲染配置灵活。

安装

VuePress使用简单，可以使用 yarn 直接安装：

yarn add -D vuepress

也可以使用 npm 安装，

npm install -D vuepress

如果项目依赖 webpack 3.x，推荐使用yarn安装，因为npm会生成错误的依赖树。

示例

VuePress使用简单，可以通过命令行生成样板项目：

yarn create vuepress [directoryName]

命令行会提示选择生成的项目类型：文档，或博客。

然后，命令行会提示输入包括项目名称、描述、作者等的项目信息。依次输入后，VuePress就会生成一个样板项目结构，包括 package.json 和默认的样板内容。要启动项目，首先进行依赖的安装，运行

yarn install

依赖安装完毕后，使用预设的脚本命令

yarn dev

启动项目。等待项目构建完成后，访问 http://localhost:8080/，就会显示一个默认的静态网站：

VuePress 提供了对 YAML front matter 开箱即用的支持。文档类型的样板项目的 README.md 代码如下：

使用了 YAML 格式的 Front Matter，定义了包括主页图片、特性标签、脚注等在内的内容，最终渲染得到了我们前面看到的静态页面。

更多

• 支持 Github 风格的表格

• 支持目录生成

• 支持自定义容器

• 支持代码块语法高亮
• ……

总结

VuePress 由 Vue.js 团队维护，使用简单，开箱即用，在 Vue 的驱动下能够提供用户友好的布局和交互，开发效率高，是一个值得使用的开源项目。