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调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
深入解析ES6中的promise
Nov 08 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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继承的一个应用
2011/09/06 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
JavaScript prototype属性使用说明
2010/05/13 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
幼教求职信
2014/03/12 职场文书
诚信承诺书
2015/01/19 职场文书
工程技术员岗位职责
2015/04/11 职场文书
法人身份证明书
2015/06/18 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫