vuepress-plugin-preview 封装viewers.js 实现图片预览功能

1. VuePress 会在找出源文件夹中的所有页面档案后开始处理他们。 它会产出页面的 title 和 headers、处理 frontmatters 等等。 这些信息会被储存用来在之后渲染时使用。
2. VuePress 会在每个页面被处理后执行。 当全部都好了时，就是执行的时机了。 那些被所新增的页面也会被以同样的方式处理，而且也会被调用

vuepress 的生命周期

1. ready 可以简单理解为初始化完成调用

2. updated 页面更新调用

3. generated 生产环境构建完成调用

实现思路

根据不同业务场景可以选用不同的方式

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

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

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

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

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

因为vuepress会将 md 文件打包成多份 html 文件，所以在每次文件地址变更的时候我们都需要知道这个变更之后更新我们的组件，根据上面的生命周期可以在updated实现我们的需求 在update中对selector 绑定click事件，通过viewers.js 预览图片

github插件地址

图片预览插件地址

使用方式

npm install vuepress-plugin-preview

.vuepress/config/plugins.js 中配置

    [
        'vuepress-plugin-preview', // 图片预览
        {
        selector: '.theme-vdoing-content img:not(.no-zoom)' // 排除class是no-zoom的图片
        },
    ],