快速开发像vue elementui官网一样的api查询网站

推荐vuepress

附官网VuePress 中文文档 | VuePress 中文网

前言
一直想做公司的api封装查询网站，百度寻找工具返回结果大多是 gitbook
于是开始各种查询GitBook

1. GitBook 是使用 GitHub / Git 和 Markdown（或AsciiDoc）构建漂亮书籍的命令行工具（和Node.js库）。
2. 需要，官网和离线编辑工具gitbook
3. 详细了解GitBook参考文章
   GitBook 从懵逼到入门
   Gitbook 超详细入门教程！电子书从入门到发布
   windows 安装gitbook并使用gitbook editor可视化工具

了解差不多才发现gitbook不是我想要的，离线编辑器仍需要外网才能快速的开发。开始另辟蹊径，更换关键字诸多查询。终于找到了尤雨溪大大官网API编写工具—VuePress
正如官网所属 ：

像数 1, 2, 3 一样容易

为什么用VuePress而不是…（官网引用）

Nuxt

VuePress 能做的事情，Nuxt 理论上确实能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。（对应React 的 Next）

Docsify / Docute

这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！

Hexo

Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。

GitBook

我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。
为

使用

1. 安装环境(建议用yarn,此处npm 会生成错误的依赖树)

npm install -g yarn
yarn global add vuepress 

2. 建立最基础目录

进入项目目录 例如api

cd api

建立以下最基础目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   │  
│   │   └── config.js (可选的)
│   │ 
│   └──  README.md (默认访问页面，相当于index.html)
│   
└── package.json

当然README.md文件还是遵循markdown语法，开发内容；
参考链接 Markdown 语法手册完整整理
package.json里面

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

3. 启动

vuepress dev .

执行结束即可看到控制台启动成功

浏览器打开http://localhost:8080/访问并开始开发
打包

vuepress build .

当然官网还有很多api功能，例如默认主题侧边栏、搜索栏、首页配置、markdown中使用vue、Front
Matter、Markdown插槽等高级用法，具体参考api，再次不一一赘述。

附官方目录结构

├── docs
│   ├── .vuepress (可选的，用于存放全局的配置、组件、静态资源等)
│   │   ├── components (可选的，Vue 组件，该目录中将会被自动注册为全局组件)
│   │   ├── theme (可选的，本地主题)
│   │   │   └── Layout.vue
│   │   ├── public (可选的，静态资源目录)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl（将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级）
│   │   │   └── palette.styl（用于重写默认颜色常量，或者设置新的 stylus 颜色常量）
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html（开发环境的 HTML 模板文件）
│   │   │   └── ssr.html （构建时基于Vue SSR 的 HTML 模板文件）
│   │   ├── config.js (可选的，配置文件的入口文件)
│   │   └── enhanceApp.js (可选的，客户端应用的增强)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

---

每天学习一点点，坚持终将成为强大的自己