VuePress-Vue驱动的静态网站生成器入门教程

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby

1、创建并进入一个新目录

2、使用你喜欢的包管理器进行初始化

3、将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

4、创建你的第一篇文档

5、在 package.json 中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

6、在本地启动服务器

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。

你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。

一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等，

由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

    docsify可以即时生成文档网站，它可以智能地加载和解析您的Markdown文件并将其显示为网站，但是它不会生成静态html文件, SEO 不够友好。使用简单，支持ie10以上浏览器。官方推荐部署到GitHub Pages上，它也支持服务端渲染。因为服务端渲染麻烦（我不会...）和浏览器不能兼容ie9的原因我放弃了他选择了vuepress，但总的来说使用起来还是很方便，界面也可以，还是比较值得推荐的。

    官方文档： https://docsify.js.org/

    Vue 驱动的静态网站生成器。跟Docsify一样也是以Markdown为中心的项目结构，但是它可以为每个页面预渲染生成静态的html页面，可以通过vue去自定义主题，浏览器支持ie9及以上浏览器，上手程度相对于Docsify要难点，但是部署简单，功能也蛮强大的我最终也选择了它。吐槽一下：左侧导航只支持3级栏目导航（h1-h3），没有Docsify灵活。

    官方中文网： https://www.vuepress.cn/

    Docute和Docsify差不多，但是它不支持ie...,如果不考虑ie兼容性问题的可以参考一下

    官方中文网： https://docute.org/zh/

    也是使用Markdown解析文章，能够兼容ie9,但是它是一个博客框架，它主题样式不太适用于帮助文档，所以我没有考虑它，单从文档网站的角度的话还是推荐使用的，兼容性比较好，上手度简单。

    官方链接： https://hexo.io/

    GitBook是一款文档编辑工具，单据说更像是一个现代的文档平台，无法实现个性化部署，所以暂时没有考虑。

    官网链接： http://caibaojian.com/gitbook/

    Nuxt.js 是一个基于 Vue.js 的通用应用框架，vuepress能做的，它理论上能做，但是Nuxt 是为构建应用程序而生的，VuePress则专注以内容为中心的静态网站，所以就文档网站我更推荐VuePress

    官网链接:  https://www.nuxtjs.cn/

---