手把手教您基础Vue 插件的开发与发布
手把手教您Vue 插件的开发与发布
- Vue 插件的介绍
- 插件的使用方法
- 编写好插件后发布操作
- 使用插件
Vue 插件的介绍
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，使用插件是让代码不那么零散，看起来更有整体性。
官方解释
一般有下面几种：
- 加全局方法或者属性。如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
插件的使用方法
可以通过Vue.directive 为自定义指令：
基本格式：
上图：
- ‘ind’ 对应指令名称
- ‘el’ 指令所绑定的元素，可以用来直接操作 DOM
- ‘binding’ 指令所绑定的元素，可以用来直接操作 DOM,如下：
其中：
name => 指令名称
value => 指令绑定值
expression => 绑定值的字符串形式
modifiers => 一个包含修饰符的对象
- ‘vnode’ 虚拟节点
例如：
通过操作虚拟节点来改变文本内容
vnode.elm.innerText = ‘小王八’
- ‘oldVnode’ 上一个虚拟节点
注意项：仅在 update 和 componentUpdated 钩子中可用
也可以通过Vue.minxin 定义公共属性方法：
例子：
check的实现
- 通过Object.keys拿到拿到check下keys数组如：[‘text’]
- 通过rule获取 key 对应的规则
- 通过this.$watch监听当前key变化，进入编写好的规则
还可以Vue.prototype实现：
定义方法名与规则
调用方法
编写好插件后发布操作
首先要确保npm账号已注册
通过npm init -y 初始化目标文件夹，之后文件夹下会多出pakage.json文件
修改pakage.json相关信息
name 为之后插件名称不得重名，名称不得出现大写
version 版本信息
author 作者名称输入npm login 进行登录操作
登录成功后 执行npm publish 发布
使用插件
- npm i 插件名称
- import xx from '插件名称’
Vue.use(xx) — 全局注册 就可以使用啦
最后附上笔记添加链接描述
以上是 手把手教您基础Vue 插件的开发与发布 的全部内容， 来源链接： utcz.com/z/377395.html
