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 相关文章推荐
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
JavaScript的一些小技巧分享
2021/01/06 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
初学Python函数的笔记整理
2015/04/07 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
检讨书范文300字
2015/01/28 职场文书
小学班主任个人总结
2015/03/03 职场文书