如何制作Vue插件并打包成npm包？

本文共计1170个文字，预计阅读时间需要5分钟。

Vue插件通常用于添加全局性功能，主要包括：+ 全局方法或属性+ 全局资源（指令、过滤器等）+ 通过mixin方法添加组件选项+ 在Vue.prototype上添加全局属性

vue的插件一般用来添加全局性的功能，具体可分为：

1. 添加全局方法或者属性；
2. 添加全局资源（指令、过滤器等）；
3. 通过全局 mixin 方法添加一些组件选项；
4. 在 Vue.prototype 上 添加 Vue 实例方法；
5. 创建一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

一般来说我们在项目中倾向于第五种方式，可以通过创建一个js文件包含我们需要添加的多种全局性功能，指令、过滤器、实例方法之类的。这样的一个插件的构建也不难，主要就是使用vue提供的install 方法，传入Vue构造器以及你所能用到的参数对象；添加对应的功能，export出去，在需要的地方引入并Vue.use()方法注册即可；具体使用参考vue官网插件部分——开发插件。

这一次我的项目中需要添加‘反爬'功能，具体实现就是后端在检测到用户触发‘反爬'规则后返回指定错误码以及对应的验证页面，前端在全局请求中监测该错误码，在检测到错误码后通过插件加载验证页面让用户去验证，并将验证结果反馈给后端，在后端收到验证结果后移除验证页面。

需求确定后，我们就知道这个插件需要做的事情就是创建一个vue组件实例=>加载后端返回的页面=>解析并执行其中的js文件=>注册验证成功的全局回调函数。