// hooks
ready
generated
// options
chainWebpack
extendMarkdown
chainMarkdown
enhanceAppFiles
extendPageData
clientDynamicModules
clientRootMixin
additionalPages
globalUIComponents
define
alias
extendCli
beforeDevServer
afterDevServer

我有做了一张图来呈现整个生命周期。网页标头上有个开关按钮（上方正中央），按下去就会出现了。请注意它是可以上下滚动的。希望它会帮助到你。

插件如何运作

所有 API 都会在最一开始被初始化，有自己的 class 类别，有兴趣的话可以看看。之后 VuePress 在取得插件设定时，会把他们推送至相对应的地方集中，他们会在我的那张图里所显示的时机被执行。@vuepress/core/lib/node/plugin-api/abstract

准备

众所周知 VuePress可以通过或来执行。先不管是被哪个指令触发，他都得进入这个阶段。（这章节叫准备是因为这个 Function 在 VuePress 0.x 被命名为）vuepress devvuepress buildprepare

Markdown

我猜你大概已经知道 VuePress 用Markdown-it （opens new window）来渲染 Markdwon 内容。

生命周期中的首两个 API 是：

chainMarkdown

使用 markdown-it-chain 来修改内部的 markdown 配置。

extendMarkdown

一个函数，修改内部用于渲染 markdown 文件的 markdown-it 实例的配置、或者应用一些额外的插件。

首先，VuePress 需要配置 markdown-it 的设定。这边 VuePress 利用markdown-it-chain （opens new window）来完成，markdown-it-chain 是被依照 webpack-chain 的基础开发的。在配置中，VuePress 增加很多 markdown-it 插件（其中大多数是 VuePress 建立的）。

然后 VuePress 会开始执行来跟上面相同的方法配置 markdown-it。在 markdown-it-chain 通过上述所有配置建立出 markdown-it 的配置实例后，VuePress 开始执行。chainMarkdownextendMarkdown

那些跟撰写 Markdown 有关的好用功能大概都是在这里被完成的，像是提供缩写来建立漂亮 UI 组件的，或是将转换成来实现 SPA 页面导向，等等。Custom ContainersInternal Links<router-link>

Ready

有五个 API 在这个段落：

ready

ready钩子在应用初始化之后，并在某些特定的函数式 API 执行之前执行。

clientDynamicModules

在编译期间生成一些在客户端使用的模块。

clientRootMixin

指向 mixin 文件的路径，它让你可以控制根组件的生命周期。

enhanceAppFiles

此选项接受指向增强文件的绝对文件路径或返回该路径的函数，你可以通过此选项做一些应用配置。

globalUIComponents

注入某些全局的 UI，并固定在页面中的某处。

在页面都被处理完后，VuePress 会执行。或许你会有兴趣知道readystyling （opens new window）是透过内部插件使用来完成的。ready

再来，执行最常被内部插件使用的。它是为什么我们能读取到clientDynamicModulesGlobal Computed （opens new window）、免手动配置 Vue router 路径就能使用 SPA 页面导向、页面组件或 layout 组件如何被引入的。此外，接下来的也是被处理的。他会产出一些暂存档案来让 VuePress 客户端可以使用。你可以在查看。clientRootMixinclientDynamicModules@vuepress/core/.temp

enhanceAppFiles` 和 使用相似的方法处理。 VuePress 客户端会透过他们所产出的暂存档案来做些应用级别的配置或是注册那些 UI components。`globalUIComponents

接下来 VuePress 会做的事取决于你执行哪个指令。

自定义的指令

extendCli

注册一个额外的 command 来增强 VuePress 的 CLI。这个函数将会以一个 CAC （opens new window）的实例作为第一个参数被调用。

VuePress 利用CAC （opens new window）来打造它的命令行接口。在 CAC 解析参数前，VuePress 会检查 node 版本、注册core commands （opens new window）并处理包含你定制指令的未知指令。

注意你得要告诉 VuePress 你的来源档案在哪，例如：。 VuePress 需要执行全部我前面提到的准备，不然他没办法读取到。vuepress hello docsextendCli

Dev

建立 webpack 配置

VuePress 把 webpack 配置拆分成三个文件：base、client、server。有点像是Vue SSR Guide 的建议（opens new window）。不论 VuePress 是在创建 client 或是 server 配置，它都会建立出 base 配置。

在此段落我们只在乎 client

配置：来看看对应的 API 吧：

define

VuePress 特别开辟了一个更简洁的 define 选项。值得注意的是这些值已自动地被 JSON.stringify 处理。

alias

通过 chainWebpack 来配置别名，alias 可以使这个流程更像配置。

chainWebpack

使用 webpack-chain 来修改内部的 webpack 配置。

VuePress会在 webpack 配置中下许多功夫。我自己觉得最值得一提的是在 VuePress 中有个 markdown loader 来将文件转换成 Vue SFC。既然所有都是 SFC，那它就能被 Vue loader 处理了。.md.md

当然 VuePress 在编译的时候也会建立全局常数和设置别名。定义全局常数来做 debug 之类的事情。而与他相对应的 API被许多官方插件使用。当 VuePress 在处理客户端时受到别名很多帮助，像是读取那些被产生的文件。defineclientDynamicModules

在建立 client 配置的最后一步，VuePress 执行来提供最后机会做最后的设定。chainWebpack

Dev server

VuePress 利用webpack-dev-server （opens new window）来掌握开发模式。

beforeDevServer

等同于 webpack-dev-server 中的 before，你可以用其在所有中间件的之前去执行一些自定义的中间件。

afterDevServer

等同于 webpack-dev-server 中的 after，你可以用其在所有中间件的最后去执行一些自定义的中间件。

每当来源档案被新增或移除、配置或 frontmatters 改变，VuePress 会重新执行准备来达到真正的 hot-reload。来源文件和配置被chokidar （opens new window）监听，而 frontmatters 是被我先前所提的 markdown loader 所监听。

Build

建立 webpack 配置

这个段落跟Dev不同，不论 client 还是 server 的配置我们都在乎：

因为那些在 client 配置中被调用的 API 也都会在创建 server 配置中被调用，所以我们不会再讨论一次，如果你有兴趣可以回头看前面的段落。

但是和间还是有些差异。最重要的差别是使用Vue SSR client及server插件。他会产生 manifest 文件来提供渲染用的信息。BuildDev

生成页面

最后的 API：

generated

在生产环境的构建数据中被调用，生成的页面的路径数组将作为该函数的第一个参数。

要被生成的东西都早在之前准备了。在生成之前，如果没有 404 页面 VuePress 将会先新增它，这也代表 VuePress 也会在这执行。extendPageData

当生成各个档案时，VuePress 会调用 createBundleRenderer （opens new window）来帮助 VuePress 利用那些 manifest 来渲染 HTML。更多信息，请前往Vue SSR （opens new window）。那些 manifest 很快的会在使用后被移除，所以你从来不会再输出文件夹看到它。

当所有事都完成时，vuepress run。 ✌️generated