从零开始实现一个VuePress插件

.code-copy-btn{position:absolute;底部：10px；右：7.5px；不透明度：0.75；游标：指针；font-size:14px;}.code-copy-btn:hover{opacity:1;}前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，看看最终效果：TypeScript中文文档。但是在搭建VuePress博客的过程中，并不是所有的插件都能满足需求，所以本文将以代码复制插件的实现为例，教大家如何实现一个VuePress插件——从头开始。本地开发开发插件首先要解决的问题就是如何在本地进行开发。我们查看了VuePress1.0官方文档的“开发插件”部分，没有找到解决方案，但是在VuePress2.0官方文档的“本地插件”中，有写到：建议你直接使用配置文件作为插件，因为几乎所有的插件API都可以在配置文件中使用，这在大多数场景下更加方便。但是如果你在配置文件中要做的事情太多，最好将它们提取到单独的插件中，然后通过设置绝对路径或通过require:module.exports={plugins:[path.resolve(__dirname,'./path/to/your-plugin.js'),require('./another-plugin'),],}让我们开始吧！初始化项目我们在.vuepress文件夹下创建一个vuepress-plugin-code-copy文件夹，用来存放插件相关的代码，然后用命令行进入该文件夹，执行npminit，创建package.json。当前文件目录为：.vuepress├─vuepress-plugin-code-copy│└─package.json└─config.js我们在vuepress-plugin-code-copy下新建一个index.js文件，参考官方文档插件示例在写法上，我们使用返回对象的函数形式。该函数接受插件的配置选项作为第一个参数，包含编译时上下文的ctx对象作为第二个参数：module.exports=(options,ctx)=>{return{//...}}参考官方文档OptionAPI中的名称和生命周期函数中的readyhook，我们编写一个初始测试代码：module.exports=(options,ctx)=>{return{name:'vuepress-plugin-code-copy',asyncready(){console.log('HelloWorld!');}}}现在我们运行yarnrundocs:dev，在运行过程中可以看到我们的插件名称和打印结果：plug-indesign现在我们可以想象一下我们代码复制插件的效果，效果我想要实现的是：代码块右下角有个Copytext按钮，点击后文本变为Copied！然后一秒钟后，文本再次变为复制，代码单击时，块中的代码将复制到剪贴板。预期效果如下：如果在Vue组件中进行插件开发，我们可以轻松实现这种效果。当挂载或更新根组件时，使用document.querySelector获取所有代码块，插入一个按钮元素，然后在按钮元素上绑定一个点击事件。当点击事件被触发时，代码被复制到剪贴板，然后修改文本。1s后，修改文本VuePress插件有办法控制根组件的生命周期吗？我们查看了VuePress官方文档的OptionAPI，发现VuePress提供了一个clientRootMixin方法：mixin文件的路径，可以控制根组件的生命周期。示例代码见：//插件入口constpath=require('path')module.exports={clientRootMixin:path.resolve(__dirname,'mixin.js')}//mixin.jsexportdefault{created(){},mounted(){}}这不是我们需要的吗？那我们动手吧，修改index.js的内容：constpath=require('path');module.exports=(options,ctx)=>{return{name:'vuepress-plugin-code-copy',clientRootMixin:path.resolve(__dirname,'clientRootMixin.js')}}在vuepress-plugin-code-copy下新建clientRootMixin.js文件，写代码：exportdefault{updated(){setTimeout(()=>{document.querySelectorAll('div[class*="language-"]pre').forEach(el=>{console.log('onecodeblock')})},100)}}在浏览器中刷新页面，然后看打印：接下来就是想怎么写到按钮元素上了。当然我们可以稍微使用原生的JavaScript创建元素，然后将其插入，但是我们实际上是在一个支持Vue语法的项目中，其实我们可以创建一个Vue组件，然后挂载该组件的实例到元素。那么用什么方法挂载呢？我们可以在Vue的全局API中找到Vue.extendAPI，看一下使用示例：//elementtobemounted