手把手教您基础Vue 插件的开发与发布

Vue 插件的介绍

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，使用插件是让代码不那么零散，看起来更有整体性。

官方解释

一般有下面几种：

1. 加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

插件的使用方法

可以通过Vue.directive 为自定义指令：
基本格式：

上图：

1. ‘ind’ 对应指令名称
2. ‘el’ 指令所绑定的元素，可以用来直接操作 DOM
3. ‘binding’ 指令所绑定的元素，可以用来直接操作 DOM,如下：
   其中：
   name => 指令名称
   value => 指令绑定值
   expression => 绑定值的字符串形式
   modifiers => 一个包含修饰符的对象
4. ‘vnode’ 虚拟节点
   例如：
   通过操作虚拟节点来改变文本内容
   vnode.elm.innerText = ‘小王八’
5. ‘oldVnode’ 上一个虚拟节点
   注意项：仅在 update 和 componentUpdated 钩子中可用

也可以通过Vue.minxin 定义公共属性方法：
例子：

check的实现

1. 通过Object.keys拿到拿到check下keys数组如：[‘text’]
2. 通过rule获取 key 对应的规则
3. 通过this.$watch监听当前key变化，进入编写好的规则

还可以Vue.prototype实现：
定义方法名与规则

调用方法

编写好插件后发布操作

1. 首先要确保npm账号已注册

2. 通过npm init -y 初始化目标文件夹，之后文件夹下会多出pakage.json文件

3. 修改pakage.json相关信息
   
   name 为之后插件名称不得重名，名称不得出现大写
   version 版本信息
   author 作者名称

4. 输入npm login 进行登录操作

5. 登录成功后 执行npm publish 发布

使用插件

1. npm i 插件名称
2. import xx from '插件名称’
3. Vue.use(xx) — 全局注册 就可以使用啦

最后附上笔记添加链接描述