vue 插件的方法代码详解


Posted in Javascript onJune 06, 2019

在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。但是官方 cli3 现在并不支持搭建 plugin 开发的项目。

还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的 vue-cli-plugin-p11n 。

如果你没有安装 vue-cli,请先安装

npm i -g @vue/cli

首先,搭建项目

vue create [your plugin name] && cd [your plugin name]
vue add p11n

这样我们就有了一个初始化的插件开发环境。

install 方法

开发 vue 插件其实就是写一个 install 方法,然后把这个方法暴露出来给你的用户,他们就可以用 Vue.use(plugin) 载入插件了。

借用 vue 官方 API 上的解释: 如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。 该方法需要在调用 new Vue() 之前被调用。 当 install 方法被同一个插件多次调用,插件将只会被安装一次。

export const install = function (Vue, options) {
 // Vue 就是 vue 实例
 // options 就是 Vue.use(plugin,options) 传入的第二个参数 options
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }
 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })
 // 3. 注入组件选项
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })
 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
}

发布插件

p11n 已经帮助我们部署好了大部分 package.json 配置,只需要自己填写好 name,author,license,repository,description,keywords 这几个选项就可以了。

# login npm
npm login
# patch version
npm version patch
# publish
npm publish --access public

我自己写了一个非常简单的插件 vue-chart ,可以作为参考。

总结

以上所述是小编给大家介绍的vue 插件的方法代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
javascript实现完美拖拽效果
May 06 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
vue中keep-alive组件的入门使用教程
Jun 06 #Javascript
vue2配置scss的方法步骤
Jun 06 #Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 #Javascript
详解Vue 如何监听Array的变化
Jun 06 #Javascript
js常见遍历操作小结
Jun 06 #Javascript
You might like
截获网站title标签之家内容的例子
2006/10/09 PHP
php header Content-Type类型小结
2011/07/03 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Python IDLE入门简介
2017/12/08 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
企业统计员岗位职责
2013/12/13 职场文书
生产部主管岗位职责
2014/01/06 职场文书
新护士岗前培训制度
2014/02/02 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
报关报检委托书
2014/04/08 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
交警失职检讨书
2015/01/26 职场文书
电影雷锋观后感
2015/06/10 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
整理Python中常用的conda命令操作
2021/06/15 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android